1

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

我已经设置并将其放在 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');

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

4

1 回答 1

1

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

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

JSFiddle

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

于 2013-07-28T10:37:49.520 回答