0

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

我有两个设置为 droppables 的 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，那将是一个问题。我想要做的甚至可能吗？

谢谢！马特

4

1 回答 1

0

如果您使用 Jquery 可排序，则可以添加 connectWith 的属性：'.div1, .div2'

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

于 2013-03-05T15:42:23.837 回答