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

Question

我有两个 sortable，它们已连接，我想按一个按钮将一个项目从 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>

请看：

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

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

How to append an single item to other sortable list

html

jquery

jquery-ui