php - 如何使用Dragula JS动态进行拖放

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

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

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

我知道可以用php和ajax完成。但是对如何操纵职位一无所知

最佳答案

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


如何跟踪元素的顺序？


据我所知，dragula没有跟踪元素定位的概念。您将必须设计一种方法来标识父容器和可拖动项元素。 （示例中的div）。如果需要动态创建父容器，则也需要跟踪它们的顺序。如果您具有预定义的布局，那么您只需要做的就是跟踪元素的顺序及其所属的父元素。 （例如，如果使用dragula示例，则为left或right）。

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

要以元素放入时的顺序重新渲染页面，只需在每个容器中循环遍历所有元素，然后按照保存顺序渲染它们。

关于php - 如何使用Dragula JS动态进行拖放，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/34016564/