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

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

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

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

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

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

Вот'Простая версия страницыс кодом плюс jsFiddle:http://jsfiddle.net/39khs/

Код:

CSS:

#origin {
  background-color: green;
}
#drop {
  background-color: red;
  min-height: 120px;
}

ЯШ:

$("img").draggable({ helper: "clone", opacity: 0.5, cursor: "crosshair", scope: "drop" });
$("#drop").droppable({ accept: ".draggable", scope: "drop"});
$("#drop").sortable();

HTML:

    
        <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">
    
  <p>test</p>
    

    

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