我正在尝试拖放也可以排序。我可以从div 1拖到2,从div 2拖到div 1,但因为我使用了clone我无法进行排序工作。
有什么想法吗?
$(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'
});
}
});
});
答案 0 :(得分:7)
为了使其正常工作,您不能再将已删除的框中的项目拖动,因为您不知道它是在尝试排序还是拖动。
以下是工作代码: 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();
}
});
});
为了使其正常工作,您不能允许drop处理程序接受正在排序的项目,为此,我们将accept
过滤器添加到droppable处理程序:
accept: ":not(.ui-sortable-helper)",
现在这意味着您可以将项目从底部框拖到顶部,然后对顶部框进行排序。但是,您无法再将项目拖到顶部框之外。
您必须设计一种新方法来删除它们(可能可以使用标志来删除顶部框的可拖动/可排序功能之间的切换)
答案 1 :(得分:3)
我有同样的问题,我发现了article and demo
无需使用可拖动和可放置,只需使用以下代码(查看演示):
$('#example-1-4 .sortable-list').sortable({
connectWith: '#example-1-4 .sortable-list',
containment: '#containment'
});
关键点是sortable()的选项 connectWith 希望这会有所帮助。