如何在jQuery Sortable列表中获取被拖拽的克隆元素

当使用jQuery UI实现将元素克隆拖拽到目标列表时，receive事件中的ui.item指向的是原始元素而非克隆后的新元素，且我们需要仅在元素首次放置时执行逻辑（列表内部排序时不触发）。以下是修复后的实现方案：

完整代码 #

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.13.2/jquery-ui.min.js"></script>

<style>
  .selected {
        border:5px solid red!important;
        background-color: aqua!important;
    }
  #sortable { border: 1px solid green; }
</style>

<ul id="options">
  <li class="draggable">Option 1</li>
  <li class="draggable">Option 2</li>
</ul>

<ul id="sortable">
<li>Drag to here</li>
</ul>

JavaScript

$("#sortable").sortable({
  receive: function(event, ui) {
    // 获取刚添加到目标列表的克隆元素
    var newCloneItem = $(this).find('.draggable').last();
    // 对克隆元素执行操作（示例：添加样式）
    newCloneItem.addClass("selected");
    
    // 此处可执行数据库添加等逻辑
    // 比如获取克隆元素的内容：newCloneItem.text()
  },
  revert: true
});

$(".draggable").draggable({
  connectToSortable: "#sortable",
  helper: "clone",
  revert: "invalid"
});

$("ul, li").disableSelection();

关键说明 #

• 在sortable的receive事件中，$(this)指向目标列表容器#sortable
• 由于克隆元素会继承原始元素的.draggable类，而目标列表初始没有该类的元素，通过.find('.draggable').last()可以精准获取刚放置的克隆元素
• receive事件仅在元素从外部拖拽进入目标列表时触发，列表内部排序不会触发该事件，完全符合"仅首次放置时执行逻辑"的需求

内容的提问来源于stack exchange，提问作者Dan