jquery перетаскиваемый между двумя контейнерами и сортируемый

<p>я пытаюсь разработать небольшую страницу, которая имеет следующую функциональность:</p><ol> <li>страница будет иметь два элемента div: один из них - #origin, содержащий множество миниатюрных изображений, а второй - #drop, куда можно добавить изображения (только до 3).</li> <li>должна быть возможность перетаскивать изображения из #drop обратно в origin.</li> <li>#drop должно быть сортируемым, поскольку порядок 3 выбранных изображений имеет значение.</li> <li>при падении на #drop изображения должны выровняться, как если бы они изначально отображались таким образом с самого начала.</li> </ol><p>я никогда раньше не использовал jquery, и у меня даже был прототип рабочей страницы, где у меня уже было перетаскивание между двумя контейнерами через собственные перетаскивания в html5, но когда я добавил функциональность jableery sortable () в #drop, изображения больше нельзя перетаскивать обратно в #origin, что нарушает мою функциональность.</p><p>итак, я начал заново и хотел реализовать как функцию перетаскивания, так и сортировку с помощью jquery. я прочитал почти весь api для всех перетаскиваемых, сбрасываемых и сортируемых функций, но у меня возникают проблемы с тем, чтобы заставить это работать. не уверен, что это настройки, которые я использую для каждой функции.</p><p>на скрипке вы можете видеть, что изображения становятся перетаскиваемыми, и я вижу действующие настройки, которые я указываю (непрозрачность, курсор), но изображения не могут быть сброшены на #drop.</p><p>из того, что я понимаю, комбинация, позволяющая сделать изображения перетаскиваемыми, изображения, имеющие класс "перетаскивания", и создание #drop, способного сбрасывать с принятием ".draggable", должна позволять основную функциональность, но даже это не кажется принять. также я прочитал, что если и перетаскиваемый и сбрасываемый объекты имеют одинаковую настройку "видимости", это также должно работать, но это не так.</p><p>вот простая версия кода страницы плюс jsfiddle: <a href="http://jsfiddle.net/39khs/">http://jsfiddle.net/39khs/</a> </p><p>код:</p><p>css:</p><pre><code>#origin { background-color: green; } #drop { background-color: red; min-height: 120px; } </code></pre><p>яш:</p><pre><code>$("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" />  test <div id="drop" class="fbox">   любая помощь очень ценится.

вот скрипка с окончательным результатом: <a href="http://jsfiddle.net/39khs/82/">http://jsfiddle.net/39khs/82/ ключ заключался в том, чтобы обработать событие drop и вручную удалить выбранное изображение из #origin и добавить его в #drop. на самом деле это то, что я делал в первой реализации, но не знал, как именно это сделать с помощью jquery: $(dropped).detach().css({top: 0,left: 0}).appendto(droppedon); </code></pre><p>я не уверен, почему jquery на самом деле не удаляет перетаскиваемый элемент из старого контейнера и добавляет его в новый, но это именно то, что нужно было сделать, чтобы вновь добавленный элемент отображался правильно, а не только в том месте, где он был удален, без учета размещения/укладки css.</p><p>ключевая строка была написана @barry pitman на следующий so вопрос:</p><p> <a href="https://stackoverflow.com/questions/1254665/jquery-draggable-droppable-how-to-snap-dropped-element-to-dropped-on-element">jquery draggable + droppable: как привязать брошенный элемент к добавленному элементу</a> </p><p>обновление: у меня было немного свободного времени сегодня, и я хотел проверить, было ли это возможно с просто сортируемым, и вот, это было.</p><p> <a href="http://jsfiddle.net/wj4ak/5/">http://jsfiddle.net/wj4ak/5/</a> </p><p>всего две строки кода позволяют перетаскивать из одного контейнера в другой и сортировать элементы. они вообще не должны быть в списках ul/ol. единственное, что меня раздражает, это то, что я не собирался делать вещи на div origin сортируемыми, но сейчас я могу жить с этим.</p>