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

Question

我正在尝试开发一个具有以下功能的小页面:

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

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

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

在小提琴上,您可以看到图像变得可拖动,我可以看到我指定的设置(不透明度,光标),但图像不能放在#drop上.

根据我的理解,使图像可拖动,图像具有"可拖动"类,以及使用".draggable"接受#drop droppable的组合,它应该允许最基本的功能,但即使这样也不会采取.另外我读到如果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:

<div id="wrapper">
    <div id="origin" class="fbox">
        <img src="http://placehold.it/140x100" id="one" title="one" class="draggable" />
        <img src="http://placehold.it/140x100" id="two" title="two" class="draggable" />
        <img src="http://placehold.it/140x100" id="three" title="three" class="draggable" />
    </div>
  <p>test</p>
    <div id="drop" class="fbox">

    </div>
</div>

任何帮助是极大的赞赏.

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(),.draggable()和.sortable(),那么你只需要使用.sortable().

使用你的jsfiddle,我做了以下更改:

HTML:

<div id="wrapper">
    <div id="origin" class="fbox">
    <ul id="sort1" class="list">
      <li><img src="http://placehold.it/140x100" id="one" title="one" class="draggable" /></li>
      <li><img src="http://placehold.it/140x100" id="two" title="two" class="draggable" /></li>
      <li><img src="http://placehold.it/140x100" id="three" title="three" class="draggable" /></li>
    </ul>
    </div>
  <p>test</p>
    <div id="drop" class="fbox">
      <ul id="sort2" class="list"></ul>
    </div>
</div>

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/