jquery-ui - jqueryui - Draggable 在拖动到可排序时会丢失 id 属性

Question

我正在使用 jqueryui 的可拖动和可排序功能。我的jqueryui版本是1.9.1，jquery版本是1.7.1

我有一组可拖动的项目，以及一个可排序的容器。我将可拖动项目拖动到可排序容器，并希望在可排序的停止处理程序中读取可拖动项目的 id 属性。然而，事实证明，身份在那里是不设防的。

$(sortableselector).sortable({
    stop: function(event, ui) {
        alert(ui.item.attr('id'));
    }
});

$(draggableselector).draggable({
    revert: true,
    revertDuration: 0,
    connectToSortable: 'sortableselector',
});

打印未定义。我看过几篇指出此错误的帖子，但尚未解决。我怎样才能在那里获得拖动项目的ID？

Answer 1

我使用 jQuery UI 1.9.1 测试了 jQuery 1.7.1，并且能够使用下面的代码片段复制该问题。我无法用现代版本复制这个问题。看起来它在过去 11 年的某个时间点已得到纠正。

$(function() {
  $("#sortable").sortable({
    stop: function(event, ui) {
      console.log(ui.item);
    }
  });

  $("#draggable").draggable({
    revert: true,
    revertDuration: 0,
    connectToSortable: "#sortable",
  });
});

#sortable {
  list-style-type: none;
  margin: 0;
  padding: 0;
  width: 60%;
}

#sortable li {
  margin: 0 3px 3px 3px;
  padding: 0.4em;
  padding-left: 1.5em;
  font-size: 1.4em;
  height: 18px;
}

#sortable li span {
  position: absolute;
  margin-left: -1.3em;
}

<link rel="stylesheet" href="//code.jquery.com/ui/1.9.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
<script src="https://code.jquery.com/ui/1.9.1/jquery-ui.js"></script>

<ul id="sortable">
  <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 1</li>
  <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 2</li>
  <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 3</li>
  <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 4</li>
  <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 5</li>
</ul>
<div id="draggable" class="ui-widget-content">
  <p>Drag me around</p>
</div>