javascript - ng2-dragula实现“拖动”，并通过排序和不同的模板拖放一侧

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

另外，我希望在删除时用一个不同的模板替换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>

简而言之目标：


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


希望看到关于此的任何指示。非常感谢你。

最佳答案

您可以使用本机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">

关于javascript - ng2-dragula实现“拖动”，并通过排序和不同的模板拖放一侧，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/44238924/