一個可拖拽的，兩個可拖拽（一個是可排序的）

我已經在這裏和其他地方讀過大量的帖子，我無法完全找到適合我的情況的解決方案。一個可拖拽的，兩個可拖拽（一個是可排序的）

我有兩個設置爲可放置的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就會出現問題。我試圖做甚至可能嗎？

謝謝！馬特

來源

2013-03-05 Mattaton

如果你使用jQuery排序，可以再加入connectWith的屬性：你有三個排序的容器，但可以在任何你不希望禁用排序」 .div1，.div2'

所以基本上可排序

來源

2013-03-05 15:42:23

我遇到過一些早些時候有人使用過所有可排序的東西。有一些功能缺失，我喜歡使用可拖動/ droppables。但是，我今天已經閱讀了很多東西，並且寫了很多其他的代碼，以至於我完全忘記了爲什麼我拒絕使用純粹的可排序代碼。這是一個漫長的一天。 :-D你知道使用可分類來完成類似事情的任何工作示例嗎？ – Mattaton 2013-03-06 03:29:51

我想你只能用排序工作，而且會非常糟糕。我無法弄清楚如何讓#imgBrowser無法排序，同時仍然可以將其內容放入#imgQueue中。如果我禁用#imgBrowser，我不能將任何東西拖入#imgQueue。 – Mattaton 2013-03-07 15:25:25

一個可拖拽的，兩個可拖拽（一個是可排序的）

回答

相關問題