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

Posted 2023-05-08

【中文标题】如何将单个项目附加到其他可排序列表

【英文标题】：How to append an single item to other sortable list

【发布时间】：2021-10-14 05:31:59

【问题描述】：

我有两个可排序的，它们已连接，我想按一个按钮将项目从 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');
);

提前感谢您的帮助！

【问题讨论】：

您的代码如何知道应该移动哪个项目？请创建一个包含相关 html 的堆栈 sn-p 并包含。

默认情况下，用户应该将项目从一个列表拖放到下一个列表。您可以编写一个按钮以从一个列表中分离一个项目，然后将其附加到另一个列表中。如果这样做了，您必须 refresh 两个列表，以便他们可以检测到更改。

【参考方案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 将与其父级分离并附加到目标。

【讨论】：

非常感谢！我的代码现在完美运行，非常有帮助！