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

时间:2012-07-16 10:36:29

标签: javascript jquery drag-and-drop draggable jquery-ui-sortable

我被告知要完成这样的UI效果:

首先:

  • 页面上有两三列,每一行都有很多elem(例如:div) 柱,
  • 并且列中的所有这些元素都应该是可拖动的,并且
    同时该列应自动对所有元素进行排序。

第二名:

  • 将一个元素从一列拖动到另一列时,拖动 元素应该移动到我的光标指向的列,
  • 当放下这个元素时,应该有一个效果 放下的元素周围的元素将动画“位置”到 原始拖曳的元素所在的地方。
我找到的

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的新手,这是我应该弄清楚的最重要的项目!

任何人都可以帮我吗?

1 个答案:

答案 0 :(得分:2)

您是否尝试过jQuery UI“可排序”小部件?这听起来像是你需要的大部分内容。

特别参见“connected list”演示。