akserg / ng2-dnd

Angular 2 Drag-and-Drop without dependencies
MIT License
838 stars 251 forks source link

Simple sortable With Drop into something, without delete it (Problem when activate sortable in dropzone) #250

Open xavieraijon opened 6 years ago

xavieraijon commented 6 years ago

Hi,

I need the container that receives the elements also be sortable, but in doing so, they are no longer copied, they move. Is there any way to keep copying?

Thanks!


@Component({
    selector: 'simple-sortable-copy',
    template: `
<h4>Simple sortable With Drop into something, without delete it</h4>
<div class="row">
    <div class="col-sm-3">
        <div class="panel panel-warning"
            dnd-sortable-container [sortableData]="sourceList" [dropZones]="['source-dropZone']">
            <div class="panel-heading">Source List</div>
            <div class="panel-body">
                <ul class="list-group">
                    <li *ngFor="let source of sourceList; let x = index" class="list-group-item"
                        dnd-sortable [sortableIndex]="x" [dragEnabled]="true"
                        [dragData]="source">{{source.name}}</li>
                </ul>
            </div>
        </div>
    </div>
    <div class="col-sm-6">
        <div class="panel panel-info">
            <div class="panel-heading">Target List</div>
            <div class="panel-body" dnd-droppable dnd-sortable-container [sortableData]="targetList" (onDropSuccess)="addTo($event)" [dropZones]="['source-dropZone']">
                <ul class="list-group">
                    <li *ngFor="let target of targetList; let i = index" class="list-group-item" dnd-sortable [sortableIndex]="i">
                        {{target.name}}
                    </li>
                </ul>
            </div>
        </div>
    </div>
</div>
<pre>{{ sourceList | json }}</pre>
<pre>{{ targetList | json }}</pre>`
})
export class SimpleSortableCopyComponent {

    sourceList: Widget[] = [
        new Widget('1'), new Widget('2'),
        new Widget('3'), new Widget('4'),
        new Widget('5'), new Widget('6')
    ];

    targetList: Widget[] = [];
    addTo($event: any) {
        this.targetList.push($event.dragData);
    }
}

class Widget {
  constructor(public name: string) {}
}