如何将单个项目附加到其他可排序列表

Question

我有两个可排序的，它们已连接，我想按一个按钮将项目从 sortable1 发送到 sortable2。 就像在这个网站 (https://jqueryui.com/sortable/#connect-lists) 中显示的那样，但我只是在 <li> 内添加了一个按钮来触发从一侧移动到另一侧的动作。 我尝试了以下方法，但它只是将所有项目从sortable1 移动到sortable2：

$('#btnChange').click(function(){
  $('#sortable1 li').each(function(){
    $(this).appendTo('#sortable2');
  });
});

还有……

$('#btnChange').click(function(){
  $('#sortable1 li').appendTo('#sortable2');
});

提前感谢您的帮助！

Answer 1

考虑以下示例。

$(function() {
  $("#sortable1, #sortable2").sortable({
    connectWith: ".connectedSortable"
  }).disableSelection();

  $("#sortable1 li button").click(function(event) {
    var self = $(this).parent().detach();
    $("button", self).remove();
    $("#sortable2").append(self);
    $("#sortable1, #sortable2").sortable("refresh");
  });
});

#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;
}

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">

<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

<ul id="sortable1" class="connectedSortable">
  <li class="ui-state-default">Item 1 <button>></button></li>
  <li class="ui-state-default">Item 2 <button>></button></li>
  <li class="ui-state-default">Item 3 <button>></button></li>
  <li class="ui-state-default">Item 4 <button>></button></li>
  <li class="ui-state-default">Item 5 <button>></button></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>

请看：

• https://api.jquery.com/detach/
• https://api.jqueryui.com/sortable/#method-refresh

当用户单击按钮时，该特定 LI 将与其父级分离并附加到目标。