jQuery可拖放和两个容器之间的可放置和可排序

我正在尝试开发一个具有以下function的小页面：

1. 页面将有两个div：一个是#origin，包含很多缩略图，第二个是#drop，可以放下图像（最多只有3个）。
2. 需要可以将图像从#drop拖放回原点。
3. #drop需要是可排序的，因为3个所选图像的顺序很重要。
4. 当放在#drop上时，图像应该对齐，就好像它们原始从头开始一样显示。

我之前从未使用过jQuery，之前我甚至有一个工作页面原型，我已经通过本机HTML5拖放事件在两个容器之间进行了拖放，但是当我将sortable（）jqueryfunction添加到#drop时，图像无法再被拖回#origin，这会破坏我的function。

所以，我重新开始并希望实现拖放function以及使用jQuery进行排序。 我已经阅读了所有可拖动，可放置和可排序function的完整API，但是我无法让它工作。 不确定这是否是我为每个function使用的设置。

在小提琴上，你可以看到图像变得可拖动，我可以看到我指定的效果（不透明度，光标），但图像不能放在#drop上。

根据我的理解，使图像可拖动，图像具有“可拖动”类，以及使用“.draggable”接受#drop droppable的组合，它应该允许最基本的function，但即使这样也不会采取。 另外我读到如果draggable和droppable都具有相同的“范围”设置，它也应该工作，但事实并非如此。

这是页面代码的简单版本，加上jsFiddle： http ： //jsfiddle.net/39khs/

码：

CSS：

#origin { background-color: green; } #drop { background-color: red; min-height: 120px; } 

JS：

 $("img").draggable({ helper: "clone", opacity: 0.5, cursor: "crosshair", scope: "drop" }); $("#drop").droppable({ accept: ".draggable", scope: "drop"}); $("#drop").sortable(); 

HTML：

 
 
    
 
test
 
 
  

任何帮助是极大的赞赏。

Answer 1

这是最终结果的小提琴：

http://jsfiddle.net/39khs/82/

关键是要处理“drop”事件并手动从#origin中删除已删除的图像并将其添加到#drop。 这实际上是我在第一次实现时所做的，但不知道如何使用jQuery完全执行它：

  $(dropped).detach().css({top: 0,left: 0}).appendTo(droppedOn); 

我不确定为什么jQuery没有真正从旧容器中删除拖动的元素并将其添加到新容器中，但这是必须要做的事情才能使新删除的项目正确显示而不仅仅是它被丢弃的确切位置，无视css放置/造型。

关键是@Barry Pitman关于以下SO问题：

jQuery draggable + droppable：如何将drop元素捕捉到drop-on元素

更新：我今天有一些空闲时间想要检查是否可以进行排序，而且看哪，是的。

http://jsfiddle.net/wj4ak/5/

只需两行代码就可以从一个容器拖放到另一个容器，并对这些项进行排序。 它们根本不需要在ul / ol列表中。 令人烦恼的是，我并不打算让原点div上的项目可以排序，但这是我现在可以忍受的东西。

Answer 2

如果要使用.droppable()和.sortable() ，则只需使用.sortable() 。

使用你的jsfiddle，我做了以下更改：

HTML：

 
 
 
 
 
 
 
 
 
test
 
 
 
  

JAVASCRIPT：

 $( "#sort1, #sort2" ).sortable({ helper:"clone", opacity:0.5, cursor:"crosshair", connectWith: ".list", receive: function( event, ui ){ //this will prevent move than 3 items in droppable list if($(ui.sender).attr('id')==='sort1' && $('#sort2').children('li').length>3){ $(ui.sender).sortable('cancel'); } } }); $( "#sort1,#sort2" ).disableSelection(); 

CSS：

 #origin { background-color: green; } #drop { background-color: red; min-height: 120px; } .list { min-height: 120px; } .list li { display: inline-block; list-style-type: none; padding-right: 20px; } 

演示： http ： //jsfiddle.net/39khs/80/

希望这有帮助，如果您有任何疑问，请告诉我！

---

链接：

• http://api.jqueryui.com/sortable/