it-swarm.com.ru

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

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

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

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

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

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

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

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

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

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

27
GR7

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

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: как привязать брошенный элемент к добавленному элементу

ОБНОВЛЕНИЕ: у меня было немного свободного времени сегодня, и я хотел проверить, было ли это возможно с просто сортируемым, и вот, это было.

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

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

64
GR7

Если вы хотите использовать .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;
}

ДЕМО: http://jsfiddle.net/39khs/80/

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


21
Dom