Jqueryui сортируемое событие приема, вызванное несколько раз

Итак, у меня есть вложенный jqueryui sortable и перетаскиваемый элемент, который я могу перетащить на любой уровень.

См. jsfiddle здесь http://jsfiddle.net/rmossuk/JUnA7/4/

  • Продукт
    • Пункт 1
    • Элемент2
    • Item3
      • Item5
      • Item6
    • Item4

NewItem

Проблема заключается в том, что я перетаскиваю NewItem во вложенную сортировку (Item3), событие получения вызывается 3 раза. Однажды для сортируемого продукта и почему-то дважды для сортировки Item3!!??

Мне это нужно, чтобы вызывалось только событие сортируемого приема Item3, а не другое.

Кто-нибудь знает, как это сделать, пожалуйста?

Большое спасибо

3 ответа

Ошибка возникает из-за того, что div.sortable вложен в другой div.sortable, поэтому он дважды сортирует сортировку, когда вы добавляете новый элемент. Обходной путь, который я придумал, просто подсчитывает количество элементов, добавленных в конкретную каплю, и добавляет к дубликату класс, называемый "deleteMe".

Затем вы просто вызываете $( ". deleteMe" ). remove() в конце сортировки для удаления дополнительных функций.

Не идеально, но, похоже, работает для меня. http://jsfiddle.net/JUnA7/72/

$(function() {
 var dropCount=0;
 $(".sortable").sortable({
 connectWith: ".sortable",
 cursor: 'pointer',
 receive: function(event, ui) {
 dropCount=dropCount+1;
 if(dropCount>1)
 $(ui.item).addClass("deleteMe");
 console.log(dropCount);
 },
 start: function(event, ui) {
 dropCount=0; 
 var placeholders=0;
 $(".ui-sortable-placeholder").each(function(){
 placeholders=placeholders+1; 
 if(placeholders>1)
 $(this).height(0);
 });
 },
 stop: function(event, ui) {
 $(".deleteMe").remove();
 dropCount=0; 
 }
 });
 $(".draggable").draggable({
 handle: ".icon-move",
 connectToSortable: ".sortable",
 appendTo: "body",
 helper: 'clone',
 distance: 30
 });
});​

ОБНОВЛЕНО

Кроме того, я заметил, что сортировочные заполнители дублируются тоже. Я удалил дубликаты, установив их высоту в 0px.

start: function(event, ui) {
 dropCount=0; 
 var placeholders=0;
 $(".ui-sortable-placeholder").each(function(){
 placeholders=placeholders+1; 
 if(placeholders>1)
 $(this).height(0);
 });
 }


Эй, я немного изменил код, если вы можете пойти на компромисс при использовании ol и li Попробуйте этот код, если он работает для u

HTML

<div>Product1
 <ol>
 <li>Item1</li>
 <li>Item2</li>
 <li name="to item3">Item3
 <ol>
 <li>Item5</li> 
 <li>Item6</li> 
 </ol> 
 </li>
 <li>Item4</li>
 <li name="new item moved">New Item</li>
 </ol>
 </div>

JQuery

$(document).ready(function(){
 $('ol.sortable').nestedSortable(
 {
 disableNesting: 'no-nest',
 forcePlaceholderSize: true,
 handle: 'div',
 items: 'li',
 opacity: .6,
 placeholder: 'placeholder',
 revert: 250,
 tabSize: 25,
 tolerance: 'pointer',
 toleranceElement: '> div',
 connectWith: '.sortable',
 stop: function(event, ui){
 var element = $(ui.item).attr("name");
 var parent = $(ui.item).parent().attr("name");
 alert(element);
 alert(parent);
 }
 });
 });

CSS

li {
 margin-left: 10px;
 margin-top: 10px;
}
.inner{
 margin-left: 40px;
}

Не забудьте включить nestedsortable.js и последний JQuery


Я думаю, вам нужно предотвратить распространение событий где-то вроде:

event.stopPropagation();

Я пробовал это быстро в нескольких местах, используя jsfiddle, но это не сработало сразу, поэтому вам, возможно, придется написать еще несколько кода.

licensed under cc by-sa 3.0 with attribution.