拖动元素时，如何获取要替换的元素的位置

Question

我被告知要完成UI效果，应该是这样的：

第一个：

• 页面上的两三列，每个列
• 并且列中的所有这些元素都应该是可拖动的，并且
  同时，列应该自动对所有元素进行排序

秒：

• 将元素从一列拖动到另一列时，拖动的元素应该移动到我的光标指向的列
• 当放下这个elem时，应该会有一个效果掉落elem周围的elem将被动画化为原始拖动elem所在的位置

我发现的enableDrag函数是这样的：

function enableDragging(ele) {
    var dragging = dragging || false,
        x, y, Ox, Oy,
        current;
        enableDragging.z = enableDragging.z || 1;
    ele.onmousedown = function(ev) {
        current = ev.target;
        current.style.position = "absolute";
        dragging = true;
        x = ev.clientX;
        y = ev.clientY;
        Ox = current.offsetLeft;
        Oy = current.offsetTop;
        current.style.zIndex = ++enableDragging.z;
        console.log(dragging);
        window.onmousemove = function(ev) {
            if (dragging == true) {
                var Sx = ev.clientX - x + Ox,
                    Sy = ev.clientY - y + Oy;
                current.style.top = Sy + "px";
                current.style.left = Sx + "px";
                return false;
            }
        };
        window.onmouseup = function(ev) {
            dragging && (dragging = false);
        }
    };
}

但我应该如何继续，我实际上不知道elem的位置，什么将取代原来拖动的elem…

主要是，我想用原始Javascript编写所有这些效果，但jQuery也很好！

我是JS的新手，这是我应该搞清楚的最大的项目！

有人能帮我吗？

Answer 1

您尝试过jQuery UI"可排序"小部件吗？听起来它能满足你的大部分需求。

请特别参阅"连接列表"演示。