jquery多个可拖拽和排序

随着jquery Draggable和排序我想做一个系统，学生可以回答一个问题（蓝框）与多个答案（红色框）和排序答案。蓝箱的数量是未知的，因此我做了一个名为'容器'的类。jquery多个可拖拽和排序

我已经设置它，把它放在的jsfiddle：http://jsfiddle.net/smethorst/h3ZNd/2/

HTML

<ul id="answers"> 
    <li>Item 1 (+)</li> 
    <li>Item 2 (+)</li> 
    <li>Item 3 (+)</li> 
    <li>Item 4 (+)</li> 
</ul> 

<ul class="container"> 
</ul> 
<ul class="container"> 
</ul>

JQuery的 $（函数（）{

$("#answers li").draggable({ 
     connectToSortable: '.container', 
     helper: 'clone', 
     revertDuration: 0 
    }); 

    $(".container").sortable({ 
     revert: true 
    }); 

    $(".container li").draggable({ 
     connectToSortable: '.container', 
     revert: "invalid", 
    }); 
});

我有解决方案的地方jsfiddle： http://jsfiddle.net/smethorst/h3ZNd/2/

因此，问题在于无法将答案拖放到其他问题框中。所以在将一个项目从红色框拖到蓝色框后，应该可以将其拖到另一个蓝色框（无克隆）。

我已经下降后，尝试不同的东西，像这些东西，但它没有工作：

$(this).append($(ui.draggable)); 
$(".container").sortable('refresh');

是否有它的解决方案？提前致谢。

来源

2013-07-28 Stefan

简单，有一个可排序的选项，您可以使用：connectWith。它接受一个选择器，连接其他sortables：

$(".container").sortable({ 
    connectWith: '.container', 
    revert: true 
});

JSFiddle

你的下一个问题可能会是，每一个盒子应该只接受一个元素。所以你需要删除一个元素的动态排序中的其他元素，这比我想象的要复杂。

来源

2013-07-28 10:37:49 nirazul

谢谢，这是一个很好的解决方案！每个盒子应该多次接受一个元素，所以这没有任何问题。但是，当有一些默认变量发生了另一个问题，这些项目将互相折叠。当一件物品从一个蓝色箱子移动到另一个时，一件物品会消失。 http://jsfiddle.net/smethorst/h3ZNd/6/ – Stefan

似乎是一个jQuery的UI错误... – nirazul

jquery多个可拖拽和排序

回答

相关问题