jquery - 将 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