Javascript 拖放和可排序jquery插件之间的冲突
我在尝试混合这些插件时遇到了冲突,我在一些演示中使用了我的脚本。 问题是,当我在同一个列表中拖动某个内容时,它会触发drop事件,并且该项目被添加到列表的末尾,如果该项目被拖放到另一个列表中,但不在同一个列表中,则这是正确的。当我将其拖放到同一个列表中时,我希望将其插入该位置(如果禁用drop事件,它会起作用) js代码:Javascript 拖放和可排序jquery插件之间的冲突,javascript,jquery,html,Javascript,Jquery,Html,我在尝试混合这些插件时遇到了冲突,我在一些演示中使用了我的脚本。 问题是,当我在同一个列表中拖动某个内容时,它会触发drop事件,并且该项目被添加到列表的末尾,如果该项目被拖放到另一个列表中,但不在同一个列表中,则这是正确的。当我将其拖放到同一个列表中时,我希望将其插入该位置(如果禁用drop事件,它会起作用) js代码: $(document).ready(function() { $("#sortlist1").treeview(); $("#sortlist1").
$(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>
-
第一
编号1
第二名
第二名
第三名
第四名
第五名
第六名
第七名
第8项
第9项
第10项
编号11
您不能混合使用这些插件:它们处理相同的事件,并且不能协同工作。要么重新考虑你的用户界面,要么使用不同的工具
有可能吗?当然可以。例如,只允许使用一个组件进行排序和拖放:(链接到调试服务器)。您可以这样做 在每个项目中创建两个链接以用作句柄 使列表按一个句柄排序 使列表可由另一个句柄拖动
现在,当您抓住一个句柄或另一个句柄时,只有一个插件会被激活,事件将被正确处理。如果您想将
元素从一个列表移动到另一个列表,只需使用可排序()的connectWith
属性即可。只需查看文档即可