jquery ui拖放显示位置

我是jQueryUI的新手。我已经浏览了jQuery可排序列表和连接列表，在这些列表中，我可以将元素从一侧拖到另一侧，并使它们可排序。但在这里，我想知道，当我将一个元素从一个容器放到另一个容器中，并将其放到另一个容器中时，应该显示元素的位置，即左，顶部位置。此外，在每次拖放之后，它应该显示列表A和列表B中的元素名称

这里是工作演示

我曾经试过这样做。到目前为止，我的代码是这样的

<div name="list-a" class="droppable connectedSortable">
     <h3>List A</h3>

    <div class="task-wrapper">
        <div class="draggable" id="1" name="1"> <a href="#">Element 1</a>

        </div>
        <div class="draggable" id="2" name="3"> <a href="#">Element 2</a>

        </div>
        <div class="draggable" id="3" name="3"> <a href="#">Element 3</a>

        </div>
    </div>
</div>
<div name="list-b" class="droppable connectedSortable">
     <h3>List B</h3>

    <div class="task-wrapper">
        <div class="draggable" id="5" name="5"> <a href="#">Element 5</a>

        </div>
        <div class="draggable" id="6" name="6"> <a href="#">Element 6</a>

        </div>
    </div>
</div>

<script type="text/javascript">
$(function () {
    $(".droppable>div").sortable({
        connectWith: ".connectedSortable>div"
    }).disableSelection();
    $(".draggable").on('drop', function(e){
   var parentOffset = $(this).parent().offset(); 
   var relX = e.pageX - parentOffset.left;
   var relY = e.pageY - parentOffset.top;
   console.log('Left:'+relX+ 'Right:'+relY);
});
});
</script>

列举
名单B
$（函数（）{
$（“.droppable>div”）。可排序({
connectWith:“.connectedSortable>div”
}).disableSelection（）；
$（“.draggable”）.on（'drop'，函数（e）{
var parentOffset=$（this.parent（）.offset（）；
var relX=e.pageX-parentOffset.left；
var relen=e.pageY-parentOffset.top；
log（'Left:'+relX+'Right:'+relY）；
});
});

它使用sortable进行拖放操作。但它并没有显示Conatiner中的位置和列表项。

---

因此，任何帮助和建议都是非常值得赞赏的。谢谢

希望这能让您了解如何做到这一点：

var parent;
var parentEl;
$(function () {
    $(".droppable>div").sortable({
        connectWith: ".connectedSortable>div",
        start: function( event, ui ) {
            parent = ui.item.parent().parent().attr('name');
            parentEl = ui.item.parent();
        },
        stop: function( event, ui ) {
            if(parent != ui.item.parent().parent().attr('name')){
                alert('top: '+ui.item.position().top);
                alert('left: '+ui.item.position().left);
                alert('for '+parent);
                parentEl.children('div').each(function(){
                    alert($(this).attr('name'));    
                });
                alert('for '+ui.item.parent().parent().attr('name'));
                ui.item.parent().children('div').each(function(){
                    alert($(this).attr('name'));    
                });

            }
        }
    }).disableSelection();
});

例如：

仅供参考

您的html中确实有一个小错误，

元素2

的名称是

3

，而不是

2

，我在上面的示例中修复了这个问题

<div class="draggable" id="2" name="3"> <a href="#">Element 2</a>

---

@NewUser如果回答了您的问题或给出了反馈，请将此答案标记为已接受。谢谢