ng2-dragula 使用排序和不同模板实现拖放一侧

Question

我已经设法让拖放工作只能从一侧拖放到另一侧，但排序被取消了。我希望能够在一侧（目标侧）而不是另一侧（源侧）继续排序。

另外，我希望在被丢弃时用不同的模板替换 HTMLElement，甚至更好：同时被丢弃。

我发现文档缺乏明确的用例，我很想看看如何做到这一点，以及我应该使用什么。

这是我目前的代码：

import {Component} from "@angular/core";
import {DragulaService} from "ng2-dragula";
import {DragAndDropHelper} from "../../../helpers/DragAndDropHelper";

@Component({
    selector: 'app-segment-dropzone',
    templateUrl: './segment-dropzone.component.html',
    styleUrls: ['./segment-dropzone.component.scss']
})
export class SegmentDropzoneComponent {
    constructor(private dragulaService: DragulaService) {
        dragulaService.setOptions('elements-bag', {
            copy: true,
            copySortSource: true,
            accepts: function (el, target, source, sibling) {
                return target.id === 'elements-dropzone';
            },
        });
        dragulaService.drag.subscribe((value) => {
            this.getElementView(DragAndDropHelper.getElementIdFromDraggedItem(value[1]));
        });
    }

    public getElementView(elementId: string) {
        console.log(elementId);
    }
}

target html

<div class="row">
    <div class="col-lg-12">
        <ul [dragula]='"elements-bag"' id="elements-dropzone">
            <li>first item</li>
            <li>second item</li>
        </ul>
    </div>
</div>

source html

<div class="mt-list-container list-simple">
    <ul [dragula]='"elements-bag"' id="elements-list">
        <li class="mt-list-item" *ngFor="let element of elements" [attr.data-element-id]="element.id" >
            <div class="list-icon-container done">
                <i class="icon-check"></i>
            </div>
            <div class="list-datetime">{{ element.type }}</div>
            <div class="list-item-content">
                <h3 class="">{{ element.name }}</h3>
            </div>
        </li>
    </ul>
</div>

简单的目标：

1. 仅从右侧拖放到左侧：完成，是 使用accept 属性完成。
2. 仅允许在左侧（目标侧，id="elements-dropzone"）排序。不在右边！
3. 在拖放时更改元素模板。

很想看到这方面的任何指示。非常感谢。

Answer 1

可以使用原生 HTML 拖放：

<script>
 function allowDrop(ev) {
  ev.preventDefault();
}

function drag(ev) {
    ev.dataTransfer.setData("text", ev.target.id);
}

function drop(ev) {
 ev.preventDefault();
 var data = ev.dataTransfer.getData("text");
 ev.target.appendChild(document.getElementById(data));
}
</script>

<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)">
<img src="img_w3slogo.gif" draggable="true" ondragstart="drag(event)" id="drag1" width="88" height="31">