我也在尝试使拖放可排序。我可以从 div 1 拖动到 div 2,从 div 2 拖动到 div 1,但因为我使用克隆,所以无法获得可排序的工作。
有什么想法吗?
$(document).ready(function() {
$("#qselected").sortable();
$("#qselected").disableSelection();
$(".qitem").draggable({
containment : "#container",
helper : 'clone',
revert : 'invalid'
});
$("#qselected, #qlist").droppable({
hoverClass : 'ui-state-highlight',
drop : function(ev, ui) {
$(ui.draggable).clone().appendTo(this);
$(ui.draggable).remove();
$(".qitem").draggable({
containment : "#container",
helper : 'clone',
revert : 'invalid'
});
}
});
});
最佳答案
要实现此功能,您不能再次拖动拖放框中的项目,因为您不知道它是否正在尝试排序或拖动。
这是工作代码: Example JSFiddle
$(document).ready(function() {
$("#qselected").sortable();
$("#qselected").disableSelection();
$(".qitem").draggable({
containment : "#container",
helper : 'clone',
revert : 'invalid'
});
$("#qselected, #qlist").droppable({
hoverClass : 'ui-state-highlight',
accept: ":not(.ui-sortable-helper)",
drop : function(ev, ui) {
$(ui.draggable).clone().appendTo(this);
$(ui.draggable).remove();
}
});
});
要使其正常工作,您不能允许放置处理程序接受正在排序的项目,为此,我们将 accept
过滤器添加到可放置处理程序:
accept: ":not(.ui-sortable-helper)",
现在这意味着您可以将项目从底部框拖到顶部,然后对顶部框进行排序。但是,您无法再将项目拖动到顶部框之外。
您将必须设计一种新方法来删除它们(可以使用标记来删除顶部框的可拖动/可排序功能之间的切换来完成)
关于jquery ui 拖放+可排序,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20263602/