5
當我嘗試混合這些插件時，我有一個衝突，我在一些演示中基於我的腳本。 問題是，當我拖動同一列表內的東西，它會觸發拖放事件，並將該項目添加到列表的末尾，如果該項目被放入另一個列表中，但不是相同，當我將它放在同一個列表，我想將其插入到那個位置（它的工作原理，如果我禁用下降事件）拖放和可排序的jQuery插件之間的衝突
JS代碼：
$(document).ready(function() {
$("#sortlist1").treeview();
$("#sortlist1").droppable({
accept: ".item",
drop: function(ev, ui) {
alert(ui.sender)
$("#sortlist1").append($(ui.draggable));
}
});
$("#sortlist2").droppable({
accept: ".item",
drop: function(ev, ui) {
$("#sortlist2").append($(ui.draggable));
}
});
$("#sortlist3").droppable({
accept: ".item",
drop: function(ev, ui) {
$("#sortlist3").append($(ui.draggable));
}
});
$('.sortlist').sortable({
handle : '.icono',
update : function() {
$('input#sortlist').val($('.sortlist').sortable('serialize'));
}
});
});
和HTML：
<ul class="sortlist treeview lista" id="sortlist1">
<li id="listItem_1" class="expandable closed item">
<div class="hitarea closed-hitarea expandable-hitarea lastExpandable-hitarea">
<img src="img/arrow_out.png" class="icono" alt="move" />
</div>
numero 1<input type="checkbox" />
<ul class="sortlist" id="sublist">
<li id="sublistItem_1"><img src="img/arrow_out.png" class="icono" alt="move" />numero 1<input type="checkbox" /></li>
<li id="sublistItem_2"><img src="img/arrow_out.png" class="icono" alt="move" />numero 2<input type="checkbox" /></li>
</ul>
</li>
<li id="listItem_2" class="item"><img src="img/arrow_out.png" class="icono" alt="move" />numero 2<input type="checkbox" /></li>
<li id="listItem_3" class="item"><img src="img/arrow_out.png" class="icono" alt="move" />numero 3<input type="checkbox" /></li>
<li id="listItem_4" class="item"><img src="img/arrow_out.png" class="icono" alt="move" />numero 4<input type="checkbox" /></li>
<li id="listItem_5" class="item"><img src="img/arrow_out.png" class="icono" alt="move" />numero 5<input type="checkbox" /></li>
<li id="listItem_6" class="item"><img src="img/arrow_out.png" class="icono" alt="move" />numero 6<input type="checkbox" /></li>
<li id="listItem_7" class="item"><img src="img/arrow_out.png" class="icono" alt="move" />numero 7<input type="checkbox" /></li>
<li id="listItem_8" class="item"><img src="img/arrow_out.png" class="icono" alt="move" />numero 8<input type="checkbox" /></li>
<li id="listItem_9" class="item"><img src="img/arrow_out.png" class="icono" alt="move" />numero 9<input type="checkbox" /></li>
<li id="listItem_10" class="item"><img src="img/arrow_out.png" class="icono" alt="move" />numero 10<input type="checkbox" /></li>
<li id="listItem_11" class="item"><img src="img/arrow_out.png" class="icono" alt="move" />numero 11<input type="checkbox" /></li>
</ul>
<ul class="sortlist treeview lista" id="sortlist2">
</ul>
<ul class="sortlist treeview lista" id="sortlist3">
</ul>