0

問題: ng2-dragulaドロップ動作を使用して以下を実装する方法が必要です。

  • iOS および Android デバイスのアプリ ランチャーに似たものを構築しようとしています。

  • アイテムAをドラッグして、別の既存のアイテムBの上にドロップしたい.

  • 別のアイテム Bの上に配置すると、両方のアイテムを含むフォルダーアイテムを作成することでこれに対応したいと思います (これは、角度/タイプスクリプトロジックで実装する機能です)。

現在の ng2-dragula ライブラリでは、アイテム Aをドラッグしてアイテム Bにドロップすると 、 onDrop イベントでアイテム A の詳細が表示されますが、アイテム Bを見つける方法はわかりません。

アイテム Bを見つける方法を理解するのに苦労しています。つまり、アイテム Aがドロップされた要素を特定する方法は?

デモ : ドラグラのセットアップと演習を示すデモ プランカーを作成しました。

private onDrop(args) {
    let [el, target, source] = args;
    // do something else
        console.log(`ondrop element: ${el.innerText.trim()}`);
        console.log(`ondrop target container: ${target.innerText.trim()}`);
        console.log(`ondrop source container: ${source.innerText.trim()}`);

  }

  private onDrag(args) {
    let [el, source] = args;
    // do something else
        console.log(`ondrag element: ${el.innerText.trim()}`);
        console.log(`ondrag source container: ${source.innerText.trim()}`);
  }

https://plnkr.co/edit/xXFWfS0Ae8fts2UL94mo

要素にマウスオーバー イベントをアタッチしようとしましたが、後で dragula onDrop イベント内で見つけましたが、要素 B の詳細 (またはアイテム A がドロップされたもの) をキャプチャしません。

どうすればこれを解決できるか教えてください。

ご指導ありがとうございました！

4

1 に答える 1