jquery 多个可拖动和可排序

Question

使用 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');

有解决办法吗？提前致谢。

Answer 1

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

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

JSFiddle

你的下一个问题可能是每个盒子应该只接受一个元素。因此，您需要在删除元素时动态删除可排序中的其他元素，这比我想象的要棘手。