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（）

刷新可排序项目。触发所有可排序项目的重新加载，导致新项目被识别。

示例

$(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-单击按钮时将元素移到列表的最后

2 个答案: