jQuery 在两个容器之间可拖放且可排序

Question

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

1. 页面将有两个 div:第一个是 #origin，包含大量缩略图，第二个是 #drop，可以将图像拖放到其中(最多 3 个)。
2. 需要能够将图像从 #drop 拖放到原点。
3. #drop 需要可排序，因为 3 个选定图像的顺序很重要。
4. 当放在 #drop 上时，图像应该对齐，就像它们从一开始就这样显示一样。

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

所以，我重新开始，想要使用 jQuery 实现拖放功能以及可排序功能。我已经阅读了几乎所有可拖动、可放置和可排序功能的 API，但我在使其正常工作时遇到了困难。不确定这是否是我为每个功能使用的设置。

在 fiddle 上，您可以看到图像变得可拖动，并且我可以看到我指定的有效设置(不透明度、光标)，但图像无法放在#drop上。

根据我的理解，使图像可拖动、具有“draggable”类的图像以及使 #drop droppable 并接受“.draggable”的组合相结合，它应该允许最基本的功能，但即使这样也不允许好像没拿我还读到，如果可拖动和可放置具有相同的“范围”设置，它也应该有效，但事实并非如此。

这是页面代码的简单版本，加上 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

这是最终结果的 fiddle :

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

关键是处理“drop”事件并手动从#origin 中删除删除的图像并将其添加到#drop。这实际上是我在第一个实现中所做的事情，但不知道如何使用 jQuery 准确地做到这一点:

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

我不确定为什么 jQuery 没有真正从旧容器中删除拖动的元素并将其添加到新容器中，但为了使新删除的项目正确显示而不仅仅是准确显示它的位置，必须这样做被删除，忽略 css 放置/样式。

关键是@Barry Pitman 提出的以下问题:

jQuery draggable + droppable: how to snap dropped element to dropped-on element

更新:我今天有一些空闲时间，想检查一下是否可以通过排序来实现，你瞧，确实如此。

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

只需两行代码即可从一个容器拖放到另一个容器，并对项目进行排序。它们根本不需要位于 ul/ol 列表中。一件烦人的事情是，我并不打算使 origin div 上的项目可排序，但这是我现在可以忍受的事情。