Question

I have a collection of draggable “content” elements, and a root-level “feedback” UI element which is displayed above them to provide feedback during drag and drop.

The problem is, during the drag operation, hovering over the “feedback” element causes the dragenter and dragover events to be fired on that element, rather than the underlying content element. It effectively “blocks” the dragenter event from firing on the correct element.

Is there a way for an element to cancel, or “opt out” of a dragenter/dragover event? I could display the feedback element underneath the content, but I’d rather not do that.

jsFiddle: http://jsfiddle.net/jact8/1/

I’m using the HTML drag/drop API, not jQuery or anything like that.

Answer 1

I’ve created a new fiddle. I think you want to use currentTarget instead of target in your handler on the columns to ensure that the event you receive is from the element you added the listener to (column) rather than the element it originated from (italicised text). See explanation here (it’s for ActionScript but I believe it’s valid for JavaScript also).

I’m assuming the listener on the insertionCaret element is for debug purposes only and have removed it (let me know if I’m mistaken here). You won’t receive the event if you don’t listen for it so won’t need to opt out of it!