名前グループを上部に表示し、ドラッグイベントをキャンセルしたい。このグループ名が一番上にある場合のように、要素の移動を無効にするにはどうすればよいですか。私のコードは:
dragulaService.drag.subscribe((value) => {
console.log(`drag: ${value[0]}`);
});
私のテンプレート:
<div class='wrapper'>
<div class='container' *ngFor='let group of groups' [dragula]='"nested-bag"'>
<div class="center-block">Table Number : {{group.name}}</div>
<div *ngFor='let item of group.items' [innerHtml]='item.name'></div>
</div>
</div>
解答を見つける:
dragulaService.setOptions('nested-bag', {
revertOnSpill: true,
moves: function (el:any, container:any, handle:any):any {
debugger
console.log(el, container);
return false;
}
});
特定のクラスで要素のドラッグを無効にするには:
dragulaService.setOptions('PUT_CONTAINER_NAME_HERE', {
moves: function (el: any, container: any, handle: any): any {
if (el.classList.contains('PUT_YOUR_CLASS_HERE')) {
return false;
}
return true;
}
});
バージョン2 (2018-07-19リリース)以降、dragulaService.createGroup()
の代わりにdragulaService.setOptions()
を使用する必要があります。
dragulaService.createGroup('<container-name>', {
moves: (el, container, handle, sibling) => false
});
これが代替案です。 invalid
の代わりにmoves
を使用できます。 ドキュメント から取得:
invalid
メソッドに(el, handle)
シグニチャを指定できます。このメソッドは、ドラッグをトリガーしてはならない要素に対してtrue
を返す必要があります。handle
引数はクリックされた要素であり、el
はドラッグされるアイテムです。これがデフォルトの実装であり、ドラッグを防ぐことはできません。function invalidTarget (el, handle) { return false; }
invalid
は、クリックされたDOM要素と、drake
コンテナの直接の子までのすべての親で呼び出されることに注意してください。
両方の関数(移動、受け入れ)を追加する必要があります。移動すると、要素のドラッグを開始することができなくなります。兄弟nullで受け入れると、他のドラッグ可能な要素がモデルにない要素で位置を変更しようとするのを防ぎます。
dragulaService.setOptions('PUT_CONTAINER_NAME_HERE', {
moves: function (el: any, container: any, handle: any): any {
if (el.classList.contains('PUT_YOUR_CLASS_HERE')) {
return false;
}
return true;
},
accepts: (el, target, source, sibling) => {
if (sibling === null) {
return false;
}
});