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

>页面将有两个div：一个是#origin，包含很多缩略图，第二个是#drop，可以放下图像(最多只有3个)。
>需要可以将图像从#drop拖放回原点。
> #drop需要可排序，因为3个所选图像的顺序很重要。
>当放在#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>

任何帮助是极大的赞赏。