如何使用dragula js动态拖放答案

【问题标题】：How to make drag and drop using dragula js dynamic如何使用dragula js动态拖放
【发布时间】：2015-12-01 09:11:37
【问题描述】：

我正在尝试使用 Dragula js 创建一个部分，如下所示：

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

我想要的是，拖放应该是动态的。这样在每次拖放时都应该保存每个元素的位置。我怎样才能做到这一点？

我知道它可以用 php 和 ajax 来完成。但不知道应该如何操纵位置

【问题讨论】：

您可以将侦听器附加到 Dragula 'drop' 事件，该事件会在每次移动元素时发送更新元素位置的请求。所以：draggableElements=dragula([$('my-draggable-elements-container')]); then: draggableElements.on('drop',function(){/*这里更新请求*/});

标签： php jquery ajax drag-and-drop dragula

【解决方案1】：

这个问题可以分为 2 个不同的问题。

如何跟踪元素的顺序？

据我所知，dragula 没有跟踪元素定位的概念。您必须设计一种方法来识别父容器和可拖动项目元素。（示例中的 div）。如果您需要动态创建父容器，您还需要跟踪它们的顺序。如果您有预定义的布局，那么您需要做的就是跟踪元素顺序以及它们所属的父级。（例如，左或右，如果我们使用 Dragula 示例）。

为每个可拖动元素创建一个 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
   });
});

如何保存元素的顺序？

这取决于您的要求。如果要将层次结构保存到数据库，则需要保存每个元素的父容器 ID、其所在的顺序或位置以及元素 ID。

要以元素被放入的相同顺序重新呈现页面，您只需循环遍历每个容器中的所有元素并按照它们保存的顺序呈现它们。

【讨论】：

【解决方案2】：

查看此[http://codepen.io/rachelslurs/pen/EjKmLG]

还有其他example 与您的 Dragula js 示例大体相似样品code 用于检查和定制

【讨论】：