如何使用dragula js实现动态拖放
我正在尝试使用dragula js创建一个部分，就像这样：
http://bevacqua.github.io/dragula/
我想要的是，拖放应该是动态的。这样在每次拖放时，每个元素的位置都应该保存下来。我该怎么做呢？
我知道这可以用php和ajax来完成。但不知道该如何操纵位置
回答 2
Stack Overflow用户
发布于 2015-12-08 02:51:41
这个问题可以分解为两个不同的问题。
- How是否要跟踪元素的顺序？
据我所知，dragula没有跟踪元素定位的概念。您必须设计一种方法来标识父容器和draggable items元素。(示例中的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
});
});- How我是否要保存elements?
的顺序
这取决于您的需求。如果要将层次结构保存到数据库中，则需要保存每个元素的父容器ID、它所在的顺序或位置以及元素ID。
要以元素被拖入的相同顺序重新呈现页面，您只需循环遍历每个容器中的所有元素，并以保存的顺序呈现它们。
Stack Overflow用户
发布于 2015-12-10 12:58:55
查看此[http://codepen.io/rachelslurs/pen/EjKmLG]
还有其他与你的dragula js很相似的示例示例code，用来检查和定制
https://stackoverflow.com/questions/34016564
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号