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>

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

Ответ 1

Здесь скрипка с окончательным результатом:

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

Ключом было обработать событие "drop" и вручную удалить выпавшее изображение из #origin и добавить его в #drop. На самом деле это то, что я делал в первой реализации, но не знал, как это сделать с помощью jQuery:

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

Я не уверен, почему jQuery действительно не удаляет перетаскиваемый элемент из старого контейнера и не добавляет его в новый, но это то, что должно было быть сделано для вновь опущенного элемента, чтобы отображаться правильно, а не только там, где он был отброшен, не считая размещения/стилизации CSS.

Ключевой линией был @Barry Pitman по следующему вопросу SO:

jQuery draggable + droppable: как привязать упавший элемент к включенному элементу

UPDATE: сегодня у меня было свободное время, и я хотел проверить, возможно ли это с помощью только сортировки, и вот и вот.

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

только две строки кода позволяют перетаскивать из одного контейнера в другой и сортировать элементы. Они не обязательно должны быть внутри списков ul/ol. Единственное, что вызывает раздражение, это то, что я не собирался сортировать элементы в исходном div, но теперь я могу жить с ним.

Ответ 2

Если вы хотите использовать .droppable(), .draggable() и .sortable(), вам нужно использовать .sortable().

Используя jsfiddle, я внесла следующие изменения:

HTML:

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

JAVASCRIPT:

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

CSS

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

DEMO: http://jsfiddle.net/39khs/80/

Надеюсь, что это поможет и дайте мне знать, если у вас есть какие-либо вопросы!

<ч/" > Ссылки:

http://api.jqueryui.com/sortable/