Question

我已经在网上和其他网站上阅读过大量帖子，但我找不到适合我情况的解决方案。

我有两个设置为droppables的div。 #imgBrowser包含一组通过AJAX动态填充的图像。一旦AJAX调用返回，它就会触发一个函数，将图像设置为draggables，将两个div（#imgBrowser和#imgQueue）设置为droppables，将#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 / droppable会覆盖sortable。我想如果可分类的是覆盖了可拖动的那么，如果我想拖回到#imgBrowser，这将是一个问题。我正在努力做甚么可能吗？

谢谢！马特

Answer 1

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

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

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

1 个答案: