1

シンプルなドラッグ アンド ドロップ インターフェイスをセットアップしようとしていますが、要素のオフセット値が一致していないために問題が発生しています。要素のオフセットは、mousemoveイベント内で導出されます。値は正しいものと正しくないものを交互に繰り返します。私は困惑しています！

要素/divがバタバタしているように見えます笑私は、 &がすべての正しい値と間違った値を交互に繰り返す

理由が本当にわかりません。どんなアイデアや提案も大歓迎です!div.offsetLeftdiv.offsetTopmousemove

ここでjsfiddle

ps、そのコーナーの 1 つの div をクリックし、それを移動して、私が意味することを最大限に確認してください

* {
    margin:     0;
    padding:    0;
    outline:    none;
}
#pageWrap {
    position:   relative;
    width:      1024px;
    margin:     0 auto;
}
#div {
    position:   absolute;
    top:        0;
    left:       0;
    background: #000;
    overflow:   hidden;
}

<div id="pageWrap">
    <div id="div" style="width:200px; height:200px;"></div>
</div>

var div         = document.getElementById('div'),
    divWidth    = div.clientWidth,
    divHeight   = div.clientHeight,
    divStyle    = div.style,
    pageWrap    = document.getElementById('pageWrap');

function divMove(e) {
    var mouseLeft   = e.clientX - pageWrap.offsetLeft,
        mouseTop    = e.clientY - pageWrap.offsetTop,
        divLeft     = mouseLeft - (div.offsetLeft + divWidth - mouseLeft),
        divTop      = mouseTop - (div.offsetTop + divHeight - mouseTop);

        divStyle.left   = divLeft + 'px';
        divStyle.top    = divTop + 'px';
    }

function divDown(e) {
    if(e.preventDefault) {
        e.preventDefault();
    } else {
        e.returnValue = false;
    }

    if (e.target === div) {
        document.addEventListener('mousemove', divMove, false);
    }
}

function cleanUp() {
        document.removeEventListener('mousemove', divMove, false);
}

document.addEventListener('mousedown', divDown, false);
document.addEventListener('mouseup', cleanUp, false);
4

1 に答える 1

2

http://jsfiddle.net/qemX6/2/を見てください。

ドラッグを開始するときは、div の境界からマウスまでの距離を覚えておく必要があります。それは と で行われxますy。（のようにe.clientX - div.offsetLeft）

次に、 のdiv位置を指定しmousePoistion + rememberedOffsetます。

于 2013-04-29T11:23:21.457 に答える