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">