Конфликт между Drag and drop и сортируемыми плагинами jquery

Question

У меня конфликт при попытке смешать эти плагины, я основал свой сценарий на некоторых демонстрациях. Проблема в том, что когда я перетаскиваю что-то в тот же список, это вызывает событие удаления, и этот элемент добавляется в конец списка, что является правильным, если элемент был добавлен в другой список, но не в тот же, когда я удаляю это в том же списке, я хочу вставить его в эту позицию (это работает, если я отключить событие перетаскивания)

JS код:

$(document).ready(function() {
      $("#sortlist1").treeview();
      $("#sortlist1").droppable({  
        accept: ".item",  
        drop: function(ev, ui) {
            alert(ui.sender)
            $("#sortlist1").append($(ui.draggable));     
        } 
      });  
      $("#sortlist2").droppable({  
            accept: ".item",
            drop: function(ev, ui) {
                $("#sortlist2").append($(ui.draggable));  
            }  
          });
      $("#sortlist3").droppable({  
            accept: ".item",  
            drop: function(ev, ui) {
                $("#sortlist3").append($(ui.draggable));  
            }  
          });
      $('.sortlist').sortable({
          handle : '.icono',
          update : function () {
              $('input#sortlist').val($('.sortlist').sortable('serialize'));
          }
        });
    });

И html:

<ul class="sortlist treeview lista" id="sortlist1">
        <li id="listItem_1" class="expandable closed item">
            <div class="hitarea closed-hitarea expandable-hitarea lastExpandable-hitarea">
                <img src="img/arrow_out.png" class="icono" alt="move" />
            </div>
            numero 1<input type="checkbox" />
            <ul class="sortlist" id="sublist">
                <li id="sublistItem_1"><img src="img/arrow_out.png" class="icono" alt="move" />numero 1<input type="checkbox" /></li>
                <li id="sublistItem_2"><img src="img/arrow_out.png" class="icono" alt="move" />numero 2<input type="checkbox" /></li>
            </ul>
        </li>
        <li id="listItem_2" class="item"><img src="img/arrow_out.png" class="icono" alt="move" />numero 2<input type="checkbox" /></li>
        <li id="listItem_3" class="item"><img src="img/arrow_out.png" class="icono" alt="move" />numero 3<input type="checkbox" /></li>
        <li id="listItem_4" class="item"><img src="img/arrow_out.png" class="icono" alt="move" />numero 4<input type="checkbox" /></li>
        <li id="listItem_5" class="item"><img src="img/arrow_out.png" class="icono" alt="move" />numero 5<input type="checkbox" /></li>
        <li id="listItem_6" class="item"><img src="img/arrow_out.png" class="icono" alt="move" />numero 6<input type="checkbox" /></li>
        <li id="listItem_7" class="item"><img src="img/arrow_out.png" class="icono" alt="move" />numero 7<input type="checkbox" /></li>
        <li id="listItem_8" class="item"><img src="img/arrow_out.png" class="icono" alt="move" />numero 8<input type="checkbox" /></li>
        <li id="listItem_9" class="item"><img src="img/arrow_out.png" class="icono" alt="move" />numero 9<input type="checkbox" /></li>
        <li id="listItem_10" class="item"><img src="img/arrow_out.png" class="icono" alt="move" />numero 10<input type="checkbox" /></li>
        <li id="listItem_11" class="item"><img src="img/arrow_out.png" class="icono" alt="move" />numero 11<input type="checkbox" /></li>
  </ul>
  <ul class="sortlist treeview lista" id="sortlist2">
  </ul>
  <ul class="sortlist treeview lista" id="sortlist3">
  </ul>

Answer 1

Вы не можете смешивать эти плагины: они обрабатывают одни и те же события и не могут взаимодействовать друг с другом. Либо переосмыслите свой интерфейс, либо используйте другие инструменты.

Возможно ли это сделать? Да, конечно. Например, Dojo DnD позволяет выполнять сортировку и перетаскивание, используя только один компонент: test_dnd.html (ссылка на сервер отладки).

Answer 2

Вы можете сделать это, вроде.

Создайте две ссылки в каждом элементе для использования в качестве маркеров.

Сделать список сортируемым по одной ручке.

Сделать список перетаскиваемым другим дескриптором.

Теперь, когда вы берете одну ручку или другую, будет активирован только один плагин, и события будут обрабатываться правильно.

Answer 3

Если вы хотите переместить элемент <li> из одного списка в другой, вы можете просто использовать свойство connectWith sortable(). Просто посмотрите в документации.