javascript – JQueryUI sortable:允许仅排序到第二个列表但不回到第一个列表
作者:互联网
我有两个列表,我想使用Jquery UI进行排序.它应该工作的方式是列表一包含一些项目的选择可能被拖到列表2.然而,不应该允许在列表1中排序或从列表2拖回到列表1,最后在列表2中排序是允许.
列表是这样的
<ul class="sortable" id = "list1">
<li> Item 1 </li>
<li> Item 2 </li>
<li> Item 3 </li>
<li> Item 4 </li>
</ul>
<ul class="sortable" id = "list2">
<li> Item 1 </li>
<li> Item 2 </li>
<li> Item 3 </li>
<li> Item 4 </li>
</ul>
我目前的可排序电话看起来像这样
$('#list1, #list2').sortable({
helper: "clone",
placeholder: "selected-option",
forcePlaceholderSize: true,
dropOnEmpty: true,
connectWith: '.sortable',
tolerance: "pointer",
revert: true,
cursor: "move",
receive: function (event, ui) {
// existing logic
},
update: function (event, ui) {
// existing logic
}
});
我知道我将不得不操纵停止,在可排序的调用上接收函数来实现这一点,但我无法弄清楚如何…
解决方法:
$('#list1, #list2').sortable({
helper: "clone",
placeholder: "selected-option",
forcePlaceholderSize: true,
dropOnEmpty: true,
connectWith: '.sortable',
tolerance: "pointer",
revert: true,
cursor: "move",
beforeStop: function (event, ui) {
if($(ui.helper).parent().attr('id') === 'list1' && $(ui.placeholder).parent().attr('id') === 'list1')
return false;
else if($(ui.helper).parent().attr('id') === 'list2' && $(ui.placeholder).parent().attr('id') === 'list1')
return false;
}
});
标签:jquery,javascript,jquery-ui,jquery-ui-sortable 来源: https://codeday.me/bug/20190529/1176226.html