我正在努力使拖放也可以排序.我可以从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",revert : 'invalid'
});
}
});
});
现场演示：http://jsfiddle.net/6xXPq/4/
解决方法
为了使其工作,您不能再将已删除的框中的项目拖动,因为您不知道它是否正在尝试排序或拖动.
这是工作代码：Example JSFiddle
$(document).ready(function() {
$("#qselected").sortable();
$("#qselected").disableSelection();
$(".qitem").draggable({
containment : "#container",accept: ":not(.ui-sortable-helper)",ui) {
$(ui.draggable).clone().appendTo(this);
$(ui.draggable).remove();
}
});
});
为了使其正常工作,您不能允许drop handler接受正在排序的项,为此,我们将accept过滤器添加到droppable处理程序：
accept: ":not(.ui-sortable-helper)",
现在,这意味着您可以将项目从底部框拖到顶部,然后对顶部框进行排序.但是,您无法再将项目拖到顶部框之外.
您将不得不设计一个新的方法来删除它们(可能可以使用一个标志来删除顶部框的可拖动/可排序功能之间的切换)