Question

我正在努力建立一个纯粹用于学习目的的新网站，我想尝试实施一些拖放分拣系统。我知道jQuery提供了可排序的UI组件http://jqueryui.com/sortable/，但我想从头开始设计和构建系统（这是为了学习目的）。

说到Javascript，我不得不承认我是相当新手，所以我想知道你们中是否有人可以提出2美分反对我目前对该计划如何运作的想法：

未排序的列表位于页面顶部（导航栏），每个项目都分配了一个类＆＃39;可拖动的x＆＃39;其中x是列表中的当前位置
事件侦听器绑定到列表中的每个li元素
当对元素进行鼠标左键时，设置变量以告知单击了哪个单元格，然后在光标下创建缩略图（隐藏旧单元格）并允许用户拖动
当鼠标被释放时，列表项通过更新其类号而插入新位置，同时减少其后面的所有类号

问题：

1）我的主要问题是，如何在拖动时检测到何时传递了另一个li元素？我可以假设宽度n已经通过，但每个单元格的长度可变，使得该解决方案不合适。

2）我也假设我需要使用AJAX来处理回调，否则我会得到一些不受欢迎的页面刷新（右）？

希望这不会得到投票 - 我想强调我不是在寻求你们的解决方案，我已经使用这些论坛足够长的时间知道我不要求社区提供代码没有提供我自己的工作！我只是对初稿的反馈以及上述2个问题的答案。

提前感谢您的时间

亚历。

Answer 1

如果您使用的是JQuery，则可以避免知道商品的订单。

.index（）函数将返回项目相对于其兄弟姐妹的位置。

然后，您可以通过向下鼠标向其添加工作类来简单地跟踪要移动的元素。（我在我的例子中使用.draging）

在mouseup事件中，只需按您添加的类找到我们的旧项目。根据首先将哪个元素与另一个元素进行比较，在您使用鼠标的元素之前或之后插入工作元素，然后删除您的工作类。

这是一个例子 http://jsfiddle.net/V72Le/2/

function swap(dragable, draging) {
    //find direction of move then move item based on direction
    var from = $(dragable).index();
    var to = $(draging).index();

    if (from > -1 && to > -1) {
        var direction = from - to;
        if (direction > 0) {
            $(draging).insertAfter($(dragable));
        } else if (direction < 0) {
            $(draging).insertBefore($(dragable));
        }
    }
}

构建拖放导航选项卡

1 个答案: