首页 文章

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

提问于
浏览 次
1

我设法让拖放工作只从一侧掉到另一侧，但排序正在被取消 . 我希望能够在一侧（目标侧）进行分类，而不是在另一侧（源侧）进行分类 .

另外，我希望在删除时用不同的模板替换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" ）进行排序 . 不在右边！

  • 在拖动和删除后更改元素模板 .

很想看到这方面的任何指针 . 非常感谢你 .

javascript html angular drag-and-drop dragula

1 回答

  • 0

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

相关问题