1

我有 3x3 的 jQuery div 列表，如下所示：

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

我叉了你的小提琴： http: //jsfiddle.net/44R97/检查#sortable-list中的位置：

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 回答