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>

要するに目標:

  1. 右から左にのみドラッグ アンド ドロップします。完了、acceptプロパティを使用して完了します。
  2. 左側 (ターゲット側、id="elements-dropzone") でのみ並べ替えを許可します。右側じゃない！
  3. ドラッグ中およびドロップ後に要素テンプレートを変更します。

これに関する指針をぜひご覧ください。どうもありがとうございました。

4

1 に答える 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">

于 2017-05-29T09:31:22.160 に答える