1

次のような jQuery div の 3x3 リストがあります。

div1 div2 div3
div4 div5 div6
div7 div8 div9

div をドラッグ アンド ドロップすると、他の div 要素に対する X & Y 位置を取得したいと考えています。したがって、div1 が div3 の位置にドラッグされた場合、div1 の新しい位置を表す位置 0,3 を取得する必要があります。プラグインを使用する必要がありますか?

したがって、droppable をそのようにオーバーライドして位置を取得する必要があるだけです。

$( ".myClass" ).droppable({ drop: function( event, ui ) 
            { 
alert('my position in relation to other divs is '+????
            } 
        });

jsFiddle を追加しました: http://jsfiddle.net/aL3tr/ ドロップされたアイテムの X & Y 座標を取得できますか? この場合、Y 位置は常にゼロになります。

4

3 に答える 3

1

これをドラッグ可能に追加します

stop: function(e,ui) {alert(ui.offset.top+","+ui.offset.left);}

（アップデート）

わかりました、すべての兄弟のために

    $( "#sortable" ).sortable({
        update: function(e,ui) {
            console.log(ui.item.parent());
            var i=ui.item;
            ui.item.parent().children().each(
                function (i,e) {
                    alert(ui.item.offset().top-$(e).offset().top);
                }
            );
        },
        revert: true
    });

ここでX相対距離を取得すると、Yは常に0ですが、同様の方法で取得できます

于 2012-05-22T13:22:27.827 に答える
1

#sortable-list 内の位置を確認するために、あなたのフィドルをフォークしました: http://jsfiddle.net/44R97/ :

stop: function() {
    var myPos = $('#sortable').find('li.ui-draggable');
    alert("I am at position "+($('#sortable').find('li').index(myPos)+1));
}

.index() は 0 からカウントされることに注意してください。そのため、結果に 1 を追加しました...

于 2012-05-22T14:07:30.450 に答える
0

次のスニペットを使用して、クリックされた要素の座標を表示するようにフィドルを更新しました。

$("li").click(function() {
    alert("I am at (" + this.offsetLeft + "," + this.offsetTop + ").");
});
于 2012-05-22T13:32:27.103 に答える