jQuery UI Sortable元素跨父列表移动时如何获取原始父容器ID
问题原因
你代码中调用的ui.originalPosition存储的是拖拽元素初始的坐标值(仅包含top、left两个属性),不包含父列表的ID相关信息,因此输出为undefined。
解决方法
jQuery UI Sortable的receive事件回调中,ui对象提供了sender属性,它就是拖拽元素原始所属列表的jQuery对象,直接读取它的id属性即可。
你只需要将receive回调的代码修改为如下内容:
receive: function(e, ui) { alert(ui.sender.attr('id')); }
修正后完整可运行代码
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>jQuery UI Sortable - Connect lists</title> <link rel="stylesheet" href="//code.jquery.com/ui/1.13.0/themes/base/jquery-ui.css"> <style> #sortable1, #sortable2 { border: 1px solid #eee; width: 142px; min-height: 20px; list-style-type: none; margin: 0; padding: 5px 0 0 0; float: left; margin-right: 10px; } #sortable1 li, #sortable2 li { margin: 0 5px 5px 5px; padding: 5px; font-size: 1.2em; width: 120px; } </style> <script src="https://code.jquery.com/jquery-3.6.0.js"></script> <script src="https://code.jquery.com/ui/1.13.0/jquery-ui.js"></script> <script> $( function() { $( "#sortable1, #sortable2" ).sortable({ connectWith: ".connectedSortable", receive: function(e, ui) { alert(ui.sender.attr('id')); } }).disableSelection(); } ); </script> </head> <body> <ul id="sortable1" class="connectedSortable"> <li class="ui-state-default">Item 1</li> <li class="ui-state-default">Item 2</li> <li class="ui-state-default">Item 3</li> <li class="ui-state-default">Item 4</li> <li class="ui-state-default">Item 5</li> </ul> <ul id="sortable2" class="connectedSortable"> <li class="ui-state-highlight">Item 1</li> <li class="ui-state-highlight">Item 2</li> <li class="ui-state-highlight">Item 3</li> <li class="ui-state-highlight">Item 4</li> <li class="ui-state-highlight">Item 5</li> </ul> </body> </html>
内容的提问来源于stack exchange,提问作者PHP9274745382389
相关产品推荐
相关产品推荐

