0

UI エフェクトを次のようにするように言われました。

最初：

  • ページに 2 つまたは 3 つの列があり、すべての列に多数の要素 (例:div) があり、
  • 列内のこれらすべての要素はドラッグ可能である必要があり、
    その間、列はすべての要素を自動的にソートする必要があります。

2番目：

  • 要素をある列から別の列にドラッグすると、ドラッグされた要素はカーソルが指す列に移動する必要があります。
  • この要素をドロップすると、ドロップされた要素の周りの要素の1つが、元のドラッグされた要素がある場所に「位置」をアニメーション化するという効果があるはずです。

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 に答える