将div从一个列表移动（拖动）到多个可能的目标，以及目标之间

Question

就像我尝试在我的图片中解释一样，我希望能够将项目从“项目列表”拖动到任何可能的拖放区域。

我还需要： - 能够将项目从一个可能的拖放区域拖动到另一个区域。 - 能够重新安排每个可能掉落区域内的物品。

我在这里找到了一些类似的解决方案，但找不到合适的解决方案。 这是一个接近我需要的代码。

$(function () {
  $(".dropTarget").sortable({
      revert: true,
      receive: function(ev, ui){
          ui.item.remove();
      }
  });
  $("#itemlist div").draggable({
      connectToSortable: ".dropTarget",
      helper: function(ev, ui){
        return "<div>"+$(this).text()+"</div>";
      }
  });
});

以下是工作示例：“http://jsfiddle.net/3wCHu/28/”

此代码的问题在于我无法将项目从“丢弃区域”移动到“另一个”。 此外，当将项目从“项目列表”移动到放置区域时，此代码“绘制”一个div，并用项目的文本填充它。但就我而言，这些项目比文本更复杂。

有人能指出我正确的方向吗？

由于

Answer 1

嗯，事实证明这很容易。 只需使用此代码选择与

连接的内容

$(function () {
        $("#items1,#items2,#items3").sortable({
                connectWith: "#items1,#items2,#items3",
                start: function (event, ui) {
                        ui.item.toggleClass("highlight");
                },
                stop: function (event, ui) {
                        ui.item.toggleClass("highlight");
                }
        });
        $("#items1,#items2,#items3").disableSelection();
});

这是一个工作演示的链接 http://www.pureexample.com/jquery-ui/sortable-connectwith.html