Muliti list sortable with restrictions

[luism88]

Hello everyone, I'm trying to use muliti list sortable but with restrictions. Supposing I have two lists, I want to drag from the first to the second list but not in reverse. Being the second also draggable and droppable. It's possible?

Thanks!

[ss-bb]

@luism88 Did you succeed doing this ? Just try to do the same but I can't find any event relate to dnd-sortable-container to do it.

[luism88]

Yes, i did. I leave you an example. I hope this helps you:

import {Component} from '@angular/core';

@Component({
    selector: 'example',
    template: `
<div class="row">
    <div class="col-sm-3">
        <div class="panel panel-default" dnd-sortable-container [sortableData]="sourceList" [dropZones]="['zona1']">
            <div class="panel-heading">Source list</div>
            <div class="panel-body">         
                <ul class="list-group">
                    <li *ngFor="let item of sourceList; let x = index" class="list-group-item"
                        dnd-sortable [sortableIndex]="x" 
                        [dragEnabled]="true"
                        [dragData]="item"> 
                        {{item.name}}                    
                    </li>
                </ul>
            </div>
        </div>
    </div>
    <div class="col-sm-3">
        <div class="panel panel-default" dnd-sortable-container  [sortableData]="targetList">
            <div class="panel-heading">Target list</div>
            <div class="panel-body" dnd-droppable (onDropSuccess)="onTargetDrop($event)" [dropZones]="['zona1']">
                <ul class="list-group">
                    <li *ngFor="let item of targetList; let x = index" class="list-group-item" 
                        dnd-sortable [sortableIndex]="x" 
                        [dragEnabled]="true" 
                        [dragData]="item"> 
                        {{item.name}}                      
                    </li>
                </ul>
            </div>
        </div>
    </div>
</div>`
})
export class SortableComponent {
    sourceList: Array<any> = [{name:"item1"},{name:"item2"}];
    targetList: Array<any> = new Array<any>();

    onTargetDrop($event: any) {
         this.targetList.push($event.dragData);
    //If you want delete source item, write your code here...
    }

}

[romildojpaiter]

Hello @ luism88, How would you add the function [allowDrop] in an component dnd-sortable-container. I need to move the objects in many of the same components dnd-sortable-container, but in each component should have only one object. Can you help me?