JQuery draggable и droppable между двумя контейнерами и сортируемыми

Я пытаюсь создать небольшую страницу, которая имеет следующие функции:

• Страница будет иметь два div: один из них #origin, содержащий много уменьшенных изображений, а второй - #drop, где изображения могут быть сброшены (только до 3).
• необходимо перетащить изображения из #drop обратно в начало.
• #drop нужно сортировать, поскольку имеет значение порядок из 3 выбранных изображений.
• При сбросе на #drop изображения должны быть выровнены, как если бы они были оригинальными, отображались с самого начала.

Я раньше не использовал jQuery, и раньше у меня был прототип рабочей страницы, где у меня уже было перетаскивание между двумя контейнерами через собственные события перетаскивания HTML5, но когда я добавил функцию sortable() jquery в #drop, изображения больше не могут быть перенесены на #origin, что нарушает мои функции.

Итак, я начал работу и хотел реализовать как функцию перетаскивания, так и сортировку с помощью jQuery. Я прочитал почти весь API для всех перетаскиваемых, отбрасываемых и сортируемых функций, но у меня возникли проблемы с его работой. Не уверен, что это настройки, которые я использую для каждой функциональности.

На скрипке вы можете видеть, что изображения становятся перетаскиваемыми, и я могу видеть настройки, которые я укажу в действительности (непрозрачность, курсор), но изображения не могут быть сброшены на #drop.

Из того, что я понимаю, сочетание перетаскивания изображений, изображений с "перетаскиваемым" классом и создания #drop droppable с принятием ".draggable", оно должно позволить использовать самые базовые функции, но даже это не делает Кажется, это не так. Также я читал, что если оба draggable и droppable имеют одинаковый параметр "scope", он также должен работать, но это не так.

Здесь простая версия кода страницы плюс 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>

Любая помощь очень ценится.

Ответы

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

<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>

$( "#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();

#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;
}