如何在jQuery Sortable拖拽列表中获取被拖拽元素的name属性值

我有两个可互相拖拽的jQuery Sortable列表，目前只能获取源列表ID，需要获取被拖拽元素的name属性值。比如把sortable1里的“Item 2”拖拽到sortable2时，要拿到它的name属性值F。

原HTML代码 #

<ul id="sortable1" class="connectedSortable">
   <li class="ui-state-default" name="B">Item 1</li>
   <li class="ui-state-default" name="F">Item 2</li>
   <li class="ui-state-default" name="X">Item 3</li>
   <li class="ui-state-default" name="G">Item 4</li>
   <li class="ui-state-default" name="H">Item 5</li>
</ul>

<ul id="sortable2" class="connectedSortable">
  <li class="ui-state-highlight" name="a">Item A</li>
  <li class="ui-state-highlight" name="b">Item B</li>
  <li class="ui-state-highlight" name="c">Item C</li>
  <li class="ui-state-highlight" name="d">Item D</li>
  <li class="ui-state-highlight" name="e">Item E</li>
</ul>

原JS脚本 #

$("#sortable1, #sortable2").sortable({
          connectWith: ".connectedSortable",
          receive: function (event, ui) {                  
              var sourceIndex = ui.sender.children('option:selected').index();     
    //let name = ui.sender.children('option:selected').attr('name');   doesn't work         
          },
          update: function (event, ui) {                  
          }
      }).disableSelection();

解决方案 #

你之前的代码错误地用了ui.sender.children('option:selected')，但我们的拖拽元素是<li>而非<option>，而且jQuery Sortable已经把被拖拽的元素直接封装在ui.item对象里了。

修改receive回调函数，直接通过ui.item.attr('name')就能获取被拖拽元素的name属性值，同时也可以通过ui.sender.attr('id')拿到源列表的ID：

$("#sortable1, #sortable2").sortable({
    connectWith: ".connectedSortable",
    receive: function (event, ui) {                  
        // 获取被拖拽元素的name属性
        var draggedName = ui.item.attr('name');
        // 获取源列表ID（可选）
        var sourceListId = ui.sender.attr('id');
        
        // 示例：打印结果
        console.log("被拖拽元素name值：" + draggedName);
        console.log("源列表ID：" + sourceListId);
    },
    update: function (event, ui) {                  
    }
}).disableSelection();

这样当你把sortable1中的“Item 2”拖拽到sortable2时，draggedName就会是F，完全符合需求。

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