javascript - ネスト可能なリスト - 親要素の外への子アイテムの移動を無効にする

Question

私のリストでは、親アイテムから子アイテムを移動することができますが、これを変更したいと考えています。

ご覧のとおり、親の内部から別の親への子アイテムの移動は許可されるべきですが、親アイテムの外部への子アイテムの移動は許可されるべきではありません。

コードが長すぎると思うので、Luna themeの nestableList を使用しているものと同様のネスト可能なリストを次に示します。スクリプトjquery.nestable.jsを次に示します。

Answer 1

あなたが提供した例では、使用されている jQuery プラグインはNestable from dbushellです。最終的に使用するプラグインを制御できますか? プロジェクトは完全に終了しており、2 年間更新されていません。

現在も維持されているソリューションを確認し、現在多くのライブラリにある「protectRoot」機能である機能を提案することをお勧めします。

プラグインを制御できない場合、現時点ではこの機能は実装されておらず、おそらく今後も実装されることはありません。

プラグインを制御しているが、それでもこのプラグインを使用したい場合は、解決策として、フォーク (プロジェクトが終了しているため多くのプラグインがあります) を使用して、この機能を維持することができます。

もう 1 つの解決策は、プロジェクトに送信された多くのプル リクエストから興味のあるコードを自分で選ぶことですが、それは決してマージされません。

たとえば、このプル リクエストは、現在使用可能な唯一のコールバックの代わりに、新しいコールバックを追加します: beforeDragStart、dragStart、dragMove、beforeDragEnd、dragEndなど。そして目的地。これらの新しい情報、特に宛先に基づいて、宛先がルート ノードの場合はドラッグをキャンセルできます。

$('.dd').nestable({})
.on('dragMove', function(event, item, source, destination) {
    // item: item we're moving.
    // source: original source of the item.
    // destination: new position of the item.
});

ニーズに合ったもう 1 つのプル リクエストは、これです。特定のドラッグ イベントを拒否するためのコールバックを提供します。たとえば、ドラッグ中のアイテムがルート要素になった場合にドラッグ イベントを拒否できます。

$('.dd').nestable({
  reject: [
    {
      rule: function() { 
        // $(this) refers to the dragged element. 
        // Return TRUE to cancel the drag action.

        return $(this).parent().hasClass("rootList");
      }
    }
  ]
});