2

次のようにdragula jsを使用してセクションを作成しようとしています:

http://bevacqua.github.io/dragula/

私が欲しいのは、ドラッグアンドドロップが動的であることです。そのため、ドラッグ アンド ドロップごとに各要素の位置を保存する必要があります。どうやってやるの？

phpとajaxでできることはわかっています。しかし、位置をどのように操作する必要があるかについてはわかりません

4

2 に答える 2

4

この質問は、2 つの異なる問題に分けることができます。

  1. 要素の順序を追跡するにはどうすればよいですか?

私が知る限り、dragula には要素の位置を追跡するという概念がありません。親コンテナーとドラッグ可能な項目要素を識別する方法を工夫する必要があります。(例では div)。親コンテナーを動的に作成する必要がある場合は、その順序も追跡する必要があります。定義済みのレイアウトがある場合は、要素の順序とそれらが属する親を追跡するだけです。(たとえば、ドラグラの例を使用する場合、左または右)。

ドラッグ可能な要素ごとに ID を作成します。このようなものがあります。

<div id="left">
   <div id="element1">Some text</div>
   <div id="element2">Some other text</div>
</div>

要素がドロップされると、ドロップされた要素とその順序を親コンテナーにキャプチャする必要があります。これを行うには、jQuery インデックス関数を使用して、親コンテナーに相対的な新しいインデックスを見つけることができます。次に、リストをサーバー側に保存したので、リストを並べ替える必要があります。

draggableElements.on('drop',function(el)
{
   var parentElId = $(el).parent().attr('id');
   var droppedElIndex = $(el).index();
   var droppedElId = $(el).attr('id');
   $.ajax({
       url: "itemDropped.php",
       type: 'GET',
       data: { parentIdParam: parentElId, 
               droppedIndexParam: droppedElIndex,
               droppedIdParam: droppedElId   }
   }).done(function() {
      //do something else
   });
});
  1. 要素の順序を保存するにはどうすればよいですか?

これは要件によって異なります。階層をデータベースに保存する場合は、各要素の親コンテナー ID、その順序または位置、および要素 ID を保存する必要があります。

要素がドロップされたのと同じ順序でページを再レンダリングするには、各コンテナ内のすべての要素をループし、保存された順序でレンダリングします。

于 2015-12-07T18:51:41.143 に答える
1

これを見直す[http://codepen.io/rachelslurs/pen/EjKmLG]

また、チェックしてカスタマイズするためのドラッグラjsの例のサンプルコードとほとんど同じ他の例

于 2015-12-10T04:58:54.697 に答える