Jquery 一个可拖动，两个可下拉（一个可排序）

我在这里和网上的其他地方读了很多帖子，但我找不到一个适合我的情况的解决方案

我有两个div被设置为droppables#imgBrowser包含一组通过AJAX动态填充的图像。一旦AJAX调用返回，它将启动一个函数，将图像设置为可拖动，将两个div（#imgBrowser和#imgQueue）设置为可拖放，并将#imgQueue设置为可排序

用户可以在两个div之间来回拖动图像。我让这个工作完美无瑕。但是，我想添加的功能是#imgQueue也可以排序

以下是我迄今为止的代码：

function setUpSelectorDraggables(){
    $( "#imgBrowser > .imgTile" ).draggable({
          revert: "invalid",
          containment: 'window',
          scroll: false,
          helper: "clone",
          appendTo: 'body',
          cursor: "move"
        });

    $("#imgQueue")
        .sortable()
        .droppable({
          accept: ".imgTile",
          activeClass: "droppableActive",
          hoverClass: "droppableHover",
          drop: function( event, ui ) {
              addIMGtoQueue( ui.draggable );
          }
        });

    $( "#imgBrowser" ).droppable({
          accept: ".imgTile",
          activeClass: "droppableActive",
          hoverClass: "droppableHover",
          drop: function( event, ui ) {
              removeIMGfromQueue( ui.draggable );
          }
        });

    return false;   
}

两个支持功能：

function addIMGtoQueue($item){
    $item.fadeOut(function() {
        $item.appendTo( "#imgQueue" ).fadeIn(function() {
          $item
            .animate({ width: "40px", height: "40px" })
            .find( "img" )
              .animate({ height: "42px", width: "42px" });
        });
      });

    return false;   
}

function removeIMGfromQueue($item){
    $item.fadeOut(function() {
        $item
          .css( "height", "150px").css( "width", "150px")
          .find( "img" )
            .css( "height", "150px" ).css( "width", "150px" )
          .end()
          .appendTo( "#imgBrowser" )
          .fadeIn();
      });

    return false;   
}

以及简单的html：

<div id="imgSelectionArea">
    <div id="galleryAlbumList"></div>
    <div id="imgBrowserContainer">
       <div class="albumNameHeader">
          <div class="albumNameArea">&lt;---Choose an Album</div>
       </div>
       <div id="imgBrowser" class="droppableNormal"></div>
    </div>
</div>
<div style="clear:both;"></div>
<div id="imgQueue" class="droppableNormal"></div>

---选择相册

我遇到的问题是，在尝试对#imgQueue进行排序时，draggable/dropable会覆盖sortable。我想如果排序表覆盖了draggable，那么如果我想拖回#imgBrowser，这将是一个问题。 我想做的事可能吗

谢谢！

---

Matt

如果使用Jquery sortable，则可以添加connectWith的属性：'.div1、.div2'

---

基本上，您有三个可排序的容器，但可以在任何您不希望排序的容器上禁用可排序

我之前遇到过一些人使用了所有可排序的容器。使用draggables/droppables时，我喜欢缺少一些功能。但是，我今天读了太多的东西，写了太多其他的代码，以至于我完全忘记了我为什么不使用纯粹的排序表。这是漫长的一天-你知道有使用排序表来完成类似任务的工作示例吗？我正在尝试只使用排序表来完成这项工作，而且进展非常糟糕。我不知道如何使#imgBrowser不可排序，同时仍能将其内容放入#imgQueue。如果禁用#imgBrowser，则无法将任何内容拖动到#imgQueue。