我有兩個可分類目錄，它們是相連的，我想按一個按鈕將一個專案從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'）。
});
預先感謝您的幫助！
uj5u.com熱心網友回復：
請考慮下面的例子。
。$(function() {
$("#sortable1, #sortable2"/span>).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;
字體大小: 1.2em;
width: 120px;
}< link rel="styleheet" href="/code. jquery.com/ui/1.12.1/themes/base/jquery-ui.css">/span>
<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">/span>
<li class="ui-state-default">/span>Item 1 < button>></button></li>
<li class="ui-state-default">/span>Item 2 <。 button>></button></li>
<li class="ui-state-default">/span>Item 3 <。 button>></button></li>
<li class="ui-state-default">/span>Item 4 < button>></button></li>
<li class="ui-state-default">/span>Item 5 < button>></button></li>
</ul>/span>
< ul id="sortable2" class="connectedSortable">/span>
<li class="ui-state-highlight"/span>> 專案1</li>
<li class="ui-state-highlight"/span>> 專案2</li>
<li class="ui-state-highlight"/span>> 專案3</li>
<li class="ui-state-highlight"/span>> 專案4</li>
<li class="ui-state-highlight"/span>> 專案5</li>
</ul>/span>請看：
當用戶點擊按鈕時，該特定的LI將從它的父級中分離出來，并被附加到目標上。
轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/319912.html
標籤：