我正在尝试使用 Dragula js 创建一个部分,如下所示:
http://bevacqua.github.io/dragula/
我想要的是,拖放应该是动态的。这样在每次拖放时都应该保存每个元素的位置。我怎样才能做到这一点?
我知道它可以用 php 和 ajax 来完成。但不知道应该如何操纵这个位置
我正在尝试使用 Dragula js 创建一个部分,如下所示:
http://bevacqua.github.io/dragula/
我想要的是,拖放应该是动态的。这样在每次拖放时都应该保存每个元素的位置。我怎样才能做到这一点?
我知道它可以用 php 和 ajax 来完成。但不知道应该如何操纵这个位置
这个问题可以分解成两个不同的问题。
据我所知,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。
要以元素被放入的相同顺序重新呈现页面,您只需遍历每个容器中的所有元素并按照它们保存的顺序呈现它们。