jQuery UI droppable - tolérance/gourmand ne fonctionnant pas comme prévu

Question

Lorsque je fais glisser le draggable, l'élément contenant les droppables continue de se déclencher (car c'est aussi une droppable), même s'il se trouve derrière les droppables et qu'ils sont empilés autre. Il se comporte comme s'il y avait un écart entre les gouttières, et il n'y en a pas. J'ai fait an example on jsFiddle et voici the screenshot of the offending behavior.

Si j'ajoute un rembourrage à .parent (par exemple padding: 0.2em 0.2em 0em 0.2em le comportement est encore pire.

Answer 1

D'abord, je l'espère que vous avez trouvé une solution dans ces mois, je réponds à cela parce que je travaille Avec jQueryUI dans cette période et je pensais que ce serait un bon exercice pour essayer de trouver une réponse.Aussi, je déteste les questions sans réponse^_^

Malheureusement, il semble vraiment que le navigateur réagit comme si entre ces éléments .child il y a un peu d'espace, assez pour déclencher les *over événements pour le .parent. La seule idée que je suis venu avec est d'essayer de détecter si, lorsque le dropover déclencheurs d'événements sur le parent, la position de la souris est en fait dans un élément enfant. Si c'est le cas, vous devez donner la classe accepting_drops à l'élément enfant au lieu du parent.

Voici le code (j'ai fait un jsFiddle pour montrer ma solution en action):

HTML et CSS ne sont pas modifiées, donc je ne vais pas les copier à nouveau

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"); 
}); 

J'ai supprimé la ligne hoverClass: 'accepting_drops' car nous remplaçons le comportement par défaut du composant déplaçable. Pour la div parent, si un événement dropover se déclenche, je suis également dans un élément enfant, j'enlève la classe accepting_drops, sinon je le supprime de tout enfant qui pourrait l'avoir et l'ajoute au parent à la place. Lorsqu'un événement dropout se déclenche, je supprime la classe accepting_drops.

Pour l'enfant, le comportement est presque standard, sur un événement dropover je supprimer la classe accepting_drops de tout le reste et l'ajouter à l'enfant, sur un événement dropout je le supprimer.

Le comportement est encore un peu mystérieux, mais cette solution de contournement devrait faire l'affaire.