jQuery UI droppable - toleranz/gierig funktioniert nicht wie erwartet

Question

Wenn ich die ziehbare Maustaste ziehe, wird das Element, das die Droppables enthält, immer ausgelöst (weil es auch ein Droppable ist), obwohl es hinter den Droppables liegt und direkt auf jedem angeordnet ist andere. Es verhält sich so, als ob zwischen den Droppables eine Lücke ist und es gibt keine.

Ich habe an example on jsFiddle gemacht und hier ist the screenshot of the offending behavior.

Wenn ich hinzufügen padding (zum Beispiel padding: 0.2em 0.2em 0em 0.2em das Verhalten .parent ist noch schlimmer.

Answer 1

Zunächst einmal hoffe ich fand Sie eine Lösung in diesen Monaten heraus, bin ich zu beantworten, weil ich arbeite Mit jQueryUI in dieser Zeit und ich dachte, es wäre eine gute Übung zu versuchen, eine Antwort zu finden.Außerdem hasse ich unbeantwortete Fragen^_^

Leider sieht es wirklich aus wie der Browser reagiert, als ob zwischen diesen .child Elemente gibt es etwas Platz, genug, um die *over Ereignisse für die .parent auszulösen.Die einzige Idee, die ich gefunden habe, ist zu versuchen, zu erkennen, wenn, wenn die dropover Ereignisse löst auf dem übergeordneten Element aus, die Mausposition befindet sich tatsächlich in einem untergeordneten Element. Wenn dies der Fall ist, sollten Sie die Klasse accepting_drops dem untergeordneten Element und nicht dem übergeordneten Element zuweisen.

Hier ist der Code (ich eine jsFiddle machte meine Lösung in Aktion zu zeigen):

HTML und CSS sind unverändert, so dass ich sie nicht wieder

$('.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"); 
}); 

Javascript kopieren Ich habe die Zeile hoverClass: 'accepting_drops' entfernt, weil wir das Standardverhalten der ziehbaren Komponente überschreiben. Wenn ein dropover Ereignis auslöst, bin ich auch innerhalb eines Child-Elements, wenn ich ein dropover-Ereignis trete, entferne ich die accepting_drops Klasse, andernfalls entferne ich es von jedem Kind, das es haben könnte, und es stattdessen dem Eltern hinzufügen. Wenn ein dropout Ereignis ausgelöst wird, entferne ich die Klasse accepting_drops.

Für das Kind ist das Verhalten fast Standard, auf einem dropover Ereignisse ich die accepting_drops Klasse von alles andere zu entfernen und es das Kind hinzufügen, auf einem dropout Ereignis, das ich es entfernen.

Das Verhalten ist immer noch ein bisschen ein Geheimnis, aber diese Workaround sollte den Trick tun.