Один перетаскиваемый, два droppables (один из которых сортируется)

Question

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

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

У меня есть проблема в том, что перетаскиваемым/droppable переопределяет сортировку при попытке сортировать #imgQueue. Который, я думаю, если сортировка была переопределяющей перетаскиваемым, тогда это было бы проблемой, если бы я хотел вернуться к #imgBrowser. Является ли то, что я пытаюсь сделать, даже возможно?

Спасибо! Matt

Answer 1

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

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