JQuery UI droppable - tolerance / greed does not work as expected

When I drag a draggable, the element containing droppables continues to run (because it is also droppable), even though it is behind droppables and they are stacked on top of each other. It behaves like a gap between droppables and does not exist.

I made an example on jsFiddle and here is a screenshot of a behavior violation .

If I add an addition to .parent (e.g. padding: 0.2em 0.2em 0em 0.2em , the behavior is even worse.

+6
jquery-ui
source share
1 answer


First of all, I hope that you have found a solution these months, I am responding to this because I have been working with jQueryUI during this period, and I thought it would be a good exercise to try to find the answer. Also, I hate unanswered questions ^ _ ^

Unfortunately, it looks like the browser is reacting as if there is some space between these .child elements to trigger *over events for .parent . The only idea I came up with is to try to detect if the parent element is triggered during the dropover event, the mouse position is actually inside the child element. If so, you should give the accepting_drops class a child instead of a parent.

Here's the code (I did jsFiddle to show my solution in action):

HTML and CSS do not change, so I won’t copy them again

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

I deleted the hoverClass: 'accepting_drops' because we are overriding the default behavior of the draggable component. For the parent div, if when the dropover event dropover I am also inside the child element, I remove the accepting_drops class from it, otherwise I will remove it from any child that could have it, and instead add it to the parent element, When the dropout event is fired on mute, I delete the accepting_drops class.

For a child, the behavior is almost standard, in the dropover event dropover I dropover accepting_drops class from everything else and add it to the child, in the dropout event I delete it.

The behavior is still a bit similar, but this workaround should do the trick.

+1
source share

Source: https://habr.com/ru/post/918844/


All Articles