Question

使用jquery Draggable和sortable我想建立一个系统，学生可以用多个答案（红色框）回答问题（蓝框）并对答案进行排序。蓝盒的数量是未知的，因此我制作了一个名为'container'的类。

我已将其设置并放在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的 $（function（）{

    $("#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。它接受一个选择器来连接其他sortable：

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

的 JSFiddle

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

jquery多个可拖动和可排序

1 个答案: