web-dev-qa-db-ja.com

ng2-dragulaの一部の要素のドラッグを無効にする方法

名前グループを上部に表示し、ドラッグイベントをキャンセルしたい。このグループ名が一番上にある場合のように、要素の移動を無効にするにはどうすればよいですか。私のコードは：

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>
angularng2-dragula
8
Vitaly Menchikovsky

解答を見つける：

  dragulaService.setOptions('nested-bag', {
      revertOnSpill: true,
      moves: function (el:any, container:any, handle:any):any {
        debugger
        console.log(el, container);
        return false;
      }
    });
13
Vitaly Menchikovsky

特定のクラスで要素のドラッグを無効にするには：

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;
    }
});
4
szmitas

バージョン2 （2018-07-19リリース）以降、dragulaService.createGroup()の代わりにdragulaService.setOptions()を使用する必要があります。

dragulaService.createGroup('<container-name>', {
    moves: (el, container, handle, sibling) => false
});
2
Samuel Philipp

これが代替案です。 invalidの代わりにmovesを使用できます。 ドキュメント から取得：

invalidメソッドに(el, handle)シグニチャを指定できます。このメソッドは、ドラッグをトリガーしてはならない要素に対してtrueを返す必要があります。 handle引数はクリックされた要素であり、elはドラッグされるアイテムです。これがデフォルトの実装であり、ドラッグを防ぐことはできません。

function invalidTarget (el, handle) {
  return false;
}

invalidは、クリックされたDOM要素と、drakeコンテナの直接の子までのすべての親で呼び出されることに注意してください。

1
testing

両方の関数（移動、受け入れ）を追加する必要があります。移動すると、要素のドラッグを開始することができなくなります。兄弟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;
        }


});
1
Luis Diego Pizarro Moreno