Search jQuery

jQuery Forum

multiple drop events (drop on covered elements)

in Using jQuery UI • 1 year ago

I want to cover some elements on the Page to prevent their drop events for some time.

But the drop events are also fired on elements which are covered by other Elements. Click events on the other hand won't fire.

Can someone explain this?

The cover element is set absolute and covers the drop element.

See sample Code below

$('#drop').droppable({drop: function( event, ui ) {$( this ).html('drop');}})
.click(function(){$(this).html('click');});
$('#cover').droppable({ drop: function( event, ui ) {
$( this ).html('drop'));
event.stopPropagation();
}
});
$('#drag').draggable();
<div id="content">
<div id="drop" style="margin:30px; width:200; height:200; background-color:blue;"></div>
<div id="cover" style="width:360px; height:200px; position:absolute; background- color:#898989; opacity:0.5; top:0"></div>
<div>
<div id="drag" style="margin:30px; width:100; height:100; background-color:green;">drag</div>
</div>
</div>

Replies(3)

hayk.hayo..

Re: multiple drop events (drop on covered elements)

4 months ago

Hi, I have the same problem. Did you found any solution for this?

Thank you

kainar

Re: multiple drop events (drop on covered elements)

4 months ago

It is some time ago, when I was working on the problem.

If I remember right, the problem was, that jquery retrieves all elements which are positioned under the coordinates where you release the draggable. Hence it is no genuine browser event it uses the mouse down and mouse release events.

It makes no differentiation where the elements are located in the DOM or which element has the highest z-level.

my solution was to detach the drop handler and store it in a "data-drophandler" attribute on the drop element.

What would also be possible is a temporary change of the accept option.

All these works just in case you cover a specific element on purpose to prevent the drop on that specific element.

Otherwise you have to add a handler to all the doppables which determines whether the drop was in the bounds of a "cover element" and then dismiss the drop event.

I struggled some time with it, until I read the implementation of the drag and drop functions.

hayk.hayo..

Re: multiple drop events (drop on covered elements)

4 months ago

Thank you for replay.

I think I will go with accept function. This sounds like a bug in jquery but searching in internet I found that not so many people encountered it.

Thank you again!

Top Reply

Response title

Attachments

jQuery Forum

multiple drop events (drop on covered elements)

Replies(3)

Re: multiple drop events (drop on covered elements)

Re: multiple drop events (drop on covered elements)

Re: multiple drop events (drop on covered elements)

Statistics

Tags

Actions

Related Posts