一个可拖动，两个可放置（一个是可排序的）答案

【问题标题】：One draggable, two droppables (one being a sortable)一个可拖动，两个可放置（一个是可排序的）
【发布时间】：2013-03-05 15:06:26
【问题描述】：

我在这里和网络上的其他地方阅读了大量帖子，但我找不到适合我情况的解决方案。

我有两个设置为 droppable 的 div。 #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 进行排序时，可拖动/可放置会覆盖可排序。我猜如果可排序覆盖了可拖动，那么如果我想拖回#imgBrowser，那将是一个问题。我正在尝试做的事情是否可能？

谢谢！马特

【问题讨论】：

标签： jquery jquery-ui-sortable jquery-droppable jquery-draggable

【解决方案1】：

如果你使用Jquery sortable，那么你可以添加一个connectWith的属性：'.div1, .div2'

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

【讨论】：

我之前遇到过有人使用了所有可排序的东西。缺少一些我喜欢使用可拖动/可拖放的功能。但是，我今天读了很多东西，写了很多其他代码，以至于我完全忘记了我为什么不使用纯可排序的东西。这是漫长的一天。 :-D 你知道使用 sortables 来完成类似事情的任何工作示例吗？
我正在尝试让这个只使用可排序的东西，它的运行非常悲惨。我不知道如何使#imgBrowser 不可排序，同时仍然可以将其内容放入#imgQueue 中。如果我禁用#imgBrowser，我无法将任何内容拖入#imgQueue。