Одна буксируемая, две капли (одна сортируемая)

Question

Я прочитал тонну постов здесь и в других местах в Интернете, и я не могу найти решение, которое подходит для моей ситуации.

У меня есть два div, которые устанавливаются как droppables. #imgBrowser содержит набор изображений, которые динамически заполняются через AJAX. Как только этот вызов AJAX возвращается, он запускает функцию, которая устанавливает изображения как перетаскиваемые объекты, а два 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. Что, я полагаю, если бы сортируемый переопределял перетаскиваемый объект, то это было бы проблемой, если бы я захотел перетащить обратно в #imgBrowser. Возможно ли то, что я пытаюсь сделать?

Спасибо! Matt

Answer 1

Если вы используете сортировку Jquery, вы можете добавить свойство connectWith: '.div1, .div2'

Таким образом, у вас есть три сортируемых контейнера, но вы можете отключить сортировку для любого, который не хотите сортировать.