我想为两个可排序列表编写 jQuery/JavaScript 代码,但有以下限制:
- List1 只会接受来自 List2 的请求,反之亦然。
- 项目只能从顶部拖动。
项目只能添加到顶部。
我尝试了几个不同版本的 jQuery 和 jQueryUI,但我似乎无法实现这一点。这是我到目前为止所拥有的:
HTML:
<ul class='sortList' id="list1">
<li class="ui-state-default">abc1</li>
<li class="ui-state-default">def1</li>
<li class="ui-state-default">ghi1</li>
<li class="ui-state-default">jkl1</li>
<li class="ui-state-default">mno1</li>
</ul>
<ul class='sortList' id="list2">
<li class="ui-state-default">abc2</li>
<li class="ui-state-default">def2</li>
<li class="ui-state-default">ghi2</li>
<li class="ui-state-default">jkl2</li>
<li class="ui-state-default">mno2</li>
</ul>
JavaScript:
$(function() {
var blockSort = true;
$("#list1").sortable({
connectWith: "#list2",
items: "> li:first",
start: function(event, ui) {
ui.placeholder.height(ui.item.height());
},
receive: function(event, ui) {
blockSort = false;
$('#list1').find('li:eq(0)').before(ui.item);
},
stop: function(event, ui) {
if (blockSort) {
event.preventDefault();
}
blockSort = true;
}
}).disableSelection();
$("#list2").sortable({
connectWith: "#list1",
items: "> li:first",
start: function(event, ui) {
ui.placeholder.height(ui.item.height());
},
receive: function(event, ui) {
blockSort = false;
$('#list2').find('li:eq(0)').before(ui.item);
},
stop: function(event, ui) {
if (blockSort) {
event.preventDefault();
}
blockSort = true;
}
}).disableSelection();
});
CSS:
.sortList { list-style-type: none; margin: 0; padding: 0; float: left; margin-right: 10px; background: #eee; padding: 5px; width: 150px;
}
.sortList li { display: inline-block; margin: 5px; padding: 5px; font-size: 1.2em; width: 120px;
}
.ui-sortable-placeholder {
border: 1px dotted black;
background: rgba(99,99,99,0.05);
visibility: visible !important;
}
.ui-sortable-placeholder * {
visibility: hidden;
}
问题是,一旦列表项变为可排序状态,当在顶部添加更多项时,它不会被禁用。我认为这会自行发生,并且不再需要显式刷新。但我也尝试过使用刷新,但也不起作用。
应该如何正确实现?
最佳答案
这可能是 bug .
但作为解决方法,您可以 destroy可排序并使用缓存的 options 重新初始化它在 receive事件如下:
receive: function(event, ui) {
blockSort = false;
$('#list1').find('li:eq(0)').before(ui.item);
var options = $("#list1").sortable('option')
$("#list1").sortable('destroy').sortable(options);
},
关于javascript - jQueryUI 可排序刷新失败,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24279947/