构建拖放导航选项卡

Question

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

说到Javascript，我不得不承认我是个新手，所以我想知道你们中是否有人能就我目前对程序如何工作的看法提出自己的看法:

• 一个无序的列表位于页面的顶部(导航栏)，每个项目被分配一个类'draggable x'，其中x是它在列表中的当前位置
• 事件监听器绑定到列表
中的每个li元素
• 当在一个元素上按下鼠标时，一个变量被设置，告诉哪个单元格被点击了，这将在光标下创建一个缩略图(隐藏旧单元格)，并允许用户拖动
• 当鼠标被释放时，列表项通过更新其类号被插入到其新位置，同时减少其后面的所有类号

问题:

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

2)我也假设我将需要使用AJAX来处理回调，否则我将得到一些不希望的页面刷新(正确的)?

希望这不会收到投票-我想强调的是，我不是在寻求解决方案，从你们这些家伙，我已经使用这些论坛足够长的时间知道，我不要求从社区代码没有提供任何我自己的工作!我只是想要一些关于我的初稿的反馈，以及上面问的两个问题的答案。

提前感谢您的时间

Alex。

Answer 1

如果你正在使用JQuery，你可以避免知道你的项目的顺序。

.index()函数将返回该项相对于其兄弟项的位置。

你可以简单地跟踪你想要移动的元素，甚至在鼠标向下添加一个工作类。(我在我的例子中使用。drag)

在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));
        }
    }
}