一个可拖拽的，两个可拖拽（一个是可排序的）

我已经在这里和其他地方读过大量的帖子，我无法完全找到适合我的情况的解决方案。一个可拖拽的，两个可拖拽（一个是可排序的）

我有两个设置为可放置的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

一个可拖拽的，两个可拖拽（一个是可排序的）

回答

相关问题