5

ドロップ可能な領域にドロップできるドラッグ可能な要素があります。要素が削除されると、drop関数が呼び出されます。

$('#droppable').droppable({
    scope: "items",
    drop: function (event, ui) {
        // this one is called if an element is dropped in this droppable area
    }
});

私のドラッグ可能な要素：

<div class="drag" data-noteid="10">Drag me</div>
...
$('.drag').draggable({
    revert: "invalid",
    scope: "items"
});

要素がドロップされるかどうかを知る必要があるのdata-noteidは、ドロップ可能な領域の値と相対位置です。したがって、要素を左上隅にドロップする場合、x/y座標は0/0である必要があります。

ここで完全に機能する例を作成しました：http：//jsbin.com/utivo5/2/

したがって、通常は次のような属性にアクセスできます。

alert($(this).data("noteid"));

alert($(this).position().top);
alert($(this).position().left);

しかし、この場合に得られるのはundefined。

誰かが私がそれらにアクセスする方法を知っていますか？呼び出された関数のパラメータであるeventか、それで可能である必要があると思いますか？！uidrop

よろしくお願いします、ティム。

4

2 に答える 2

15

この場合、特にここでは、引数がドロップ可能な領域を参照するのではuiなく、ドラッグ可能な領域を取得する必要があります。全体的に次のようになります。thisui.draggable

drop: function (event, ui) {
  var pos = ui.draggable.offset(), dPos = $(this).offset();
  alert("nodeid: " + ui.draggable.data("noteid") + 
        ", Top: " + (pos.top - dPos.top) + 
        ", Left: " + (pos.left - dPos.left));
}

位置については、ドロップ可能な上下の位置を減算して、ここで必要な値を取得する必要があります。これは、dPos上記が削除されることです。

ここで機能する上記の変更を使用して、デモをテストできます。

于 2011-01-03T11:26:04.853 に答える
4

私の状況では、上記が機能しないことがわかりました。理由はわかりません-常にX=-7とY=229が得られました。

しかし、これは機能しました（ドロップ関数ハンドラーにあります）：

alert('X pos in drop parent container = ' + (ui.position.top - $(this).offset().top));
于 2012-07-10T15:52:18.923 に答える