0

我被告知要做一个 UI 效果应该是这样的：

第一的：

  • 页面上有两三列，每一列都有很多元素（例如：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);
        }
    };
}

但是我应该如何继续，我实际上不知道获得元素的位置什么将被替换原来拖动元素的位置......

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

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

谁能帮我这个？

4

1 回答 1

2

您是否尝试过 jQuery UI “可排序”小部件？听起来它可以满足您的大部分需求。

特别参见“连接列表”演示。

于 2012-07-16T10:46:45.753 回答