jQuery UI droppable - толерантность/жадность не работает, как ожидалось

Question

Когда я перетаскиваю draggable, элемент, содержащий droppables, продолжает срабатывать (потому что он также является droppable), хотя он стоит за droppables, и они укладываются прямо на каждом Другие. Он ведет себя так, как будто между перепадами есть разрыв, и их нет.

Я сделал an example on jsFiddle и здесь the screenshot of the offending behavior.

Если добавить обивка к .parent (например padding: 0.2em 0.2em 0em 0.2em поведение еще хуже.

Answer 1

Прежде всего, я надеюсь, что вы обнаружили решение в эти месяцы, я ответить на это, потому что я работаю с jQueryUI в этот период, и я подумал, что это будет хорошее упражнение, чтобы попытаться найти ответ. Кроме того, я ненавижу вопросы без ответа^_^

К сожалению, это похоже на то, что браузер реагирует как будто между этими .child элементами есть некоторое пространство, достаточное для запуска событий *over для .parent. Единственная идея, которую я придумал, - попытаться определить, если, когда dropover триггеры событий для родителя, положение мыши фактически находится внутри дочернего элемента. Если это так, вы должны дать классу accepting_drops дочернему элементу вместо родителя.

Вот код (я сделал jsFiddle, чтобы показать мое решение в действии):

HTML и CSS являются неизменными, поэтому я не буду копировать их снова

Javascript

$('.dragme').draggable({ 
    helper: 'clone' 
}); 

$('.parent,.child').droppable({ 
    greedy: true, 
    tolerance: 'pointer', 
}); 

$(".parent").on("dropover", function(event, ui) { 
    var first = $(".child:first"); 
    var last = $(".child:last"); 

    if((event.originalEvent.pageX > first.offset().left) && 
     (event.originalEvent.pageY > first.offset().top) && 
     (event.originalEvent.pageX <= (last.offset().left + last.width())) && 
     (event.originalEvent.pageY <= (last.offset().top + last.height()))) { 
     $(this).removeClass("accepting_drops"); 
    } 
    else { 
     $(this).addClass("accepting_drops"); 
     $(".child").removeClass("accepting_drops"); 
    } 
}).on("dropout", function() { 
    $(this).removeClass("accepting_drops"); 
}); 

$(".child").on("dropover", function() { 
    $(".parent").removeClass("accepting_drops"); 
    $(".child").removeClass("accepting_drops"); 
    $(this).addClass("accepting_drops"); 
}).on("dropout", function() { 
    $(this).removeClass("accepting_drops"); 
}); 

Я удалил строку hoverClass: 'accepting_drops', потому что мы переопределяем поведение по умолчанию перетаскиваемого компонента. Для родительского div, если при запуске события dropover я тоже внутри дочернего элемента, я удаляю из него класс accepting_drops, в противном случае я удаляю его из любого дочернего объекта, который мог бы иметь его, и вместо этого добавлять его к родительскому элементу. Когда на нем запускается событие dropout, я удаляю класс accepting_drops.

Для ребенка, поведение почти стандарт, на dropover случае я удалить accepting_drops класс от всего остального, и добавить его к ребенку, на dropout случае я удалить его.

Поведение все еще немного мистерий, но это обходное решение должно сделать трюк.