jQuery UI 可排序 js - 单击按钮时将元素移动到列表的最后

Question

我对 Sortable JS 有点陌生，我能够在拖动和更改元素位置的同时呈现项目列表。但是当用户单击列表中每一行的按钮时，我试图将元素移动到最后一个索引位置。任何人都可以让我知道如何做到这一点（或）任何关于如何更新排序顺序的示例都会有帮助。

这是我查看 (example) 的示例，但找不到我要找的内容。

提前致谢。

Answer 1

单击按钮只需删除 li 元素并将其附加到列表末尾。

$(function(){
    $("#sortable").sortable();
    $("button").on("click",function(){
        $("#sortable").append($(this).parent().remove());
    });
  });

#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; border:1px solid;}
#sortable li span { position: absolute; margin-left: -1.3em; }
button { float:right;}

<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="sortable">
  <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 1<button>Send to bottom</button></li>
  <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 2<button>Send to bottom</button></li>
  <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 3<button>Send to bottom</button></li>
  <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 4<button>Send to bottom</button></li>
  <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 5<button>Send to bottom</button></li>
  <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 6<button>Send to bottom</button></li>
  <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 7<button>Send to bottom</button></li>
</ul>

Answer 2

我想有几种方法可以做到这一点。您也可以查看 .detach() 和 .clone()。无论您做什么，当它完成时，您必须调用 .sortable("refresh") 以便更新新订单。

refresh()

Refresh the sortable items. Triggers the reloading of all sortable items, causing new items to be recognized.

例子

$(function() {
  $("#sortable").sortable();
  $("#sortable button").button({
    classes: {
      "ui-button": "ui-sm-btn"
    },
    icon: "ui-icon-arrowthickstop-1-s",
    iconPosition: "top",
    showLabel: false
  }).on("click", function() {
    var item = $(this).parent().detach();
    $("#sortable").append(item).sortable("refresh");
  });
});

#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;
  border: 1px solid;
}

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

#sortable li button.ui-sm-btn {
  border-radius: 3px;
  float: right;
  width: 20px;
  height: 20px;
  line-height: 10px;
  padding: 0;
}

#sortable li button.ui-sm-btn span {
  margin: -8px 0 0 -8px;
}

<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="sortable">
  <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 1<button>Send to bottom</button></li>
  <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 2<button>Send to bottom</button></li>
  <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 3<button>Send to bottom</button></li>
  <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 4<button>Send to bottom</button></li>
  <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 5<button>Send to bottom</button></li>
  <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 6<button>Send to bottom</button></li>
  <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 7<button>Send to bottom</button></li>
</ul>

希望对您有所帮助。

jQuery UI 可排序 js - 单击按钮时将元素移动到列表的最后

jQuery UI sortable js - move element to last of the list when a button is clicked

jquery

jquery-ui

jquery-ui-sortable