2

Google でホストされている最新の jQuery/UI を使用します。次のマークアップがあります。

<ul id="tree">
    <li><a href="1/">One</a></li>
<li><a href="2/">Two</a></li>
</ul>

そして、次のJavaScript：

$(document).ready(function(){

    // Droppable callbacks
function dragOver(overEvent, ui_object) {
    $(this).mousemove(function(moveEvent){
        console.log("moved over", this);
    });
}

function drop_deactivate() {
    $(this).unbind();
}

function drag_out() {
    $(this).unbind();
}

// Actual dragging
$("#treeContainer li").draggable({
    revert: true,
    revertDuration: 0
});

// Actuall dropping
$("a").droppable({
    tolerance: "pointer",
    over: dragOver,
    deactivate: drop_deactivate,
    out: drag_out
});

});

最初のものを 2 番目の上にドラッグするliと、mousemove 関数が起動します (そして、firebug が出力をログに記録します)。しかし、2 番目を最初の上にドラッグするliと、mousemove 関数は起動しません。これはライブで見ることができますhttp://jsbin.com/ivala。これには理由がありますか？他の方法で mousemove イベントをトラップする必要がありますか?

編集: mousemove() イベントは、現在ドラッグされている要素より前の要素にバインドされていないようです (マウスオーバー時にバインドする必要があります)。

4

3 に答える 3

7

ドラッグ可能なヘルパー要素がマウス移動イベントを食べているようです。カーソルがヘルパーの上にある場合、その下のコンテナーは mousemove イベントを受け取りません。

カーソルがヘルパー要素を直接下に置かないように、カーソルからヘルパー オフセットを配置するようにしてください。これは、ドラッグ可能の cursorAt オプションで行うことができます。

draggable({ cursorAt: { top: 5, left: 5 } })

于 2011-11-14T14:59:13.083 に答える