0

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.

Brian Tompsett - 汤莱恩
  • 5,753
  • 72
  • 57
  • 129
aaaidan
  • 7,093
  • 8
  • 66
  • 102
  • 1
    Sounds like a problem with event bubbling. Are you able to post some code or, even better, a http://jsfiddle.net? – net.uk.sweet Oct 15 '12 at 22:32
  • Great idea, done. Notice that the element "insertionCaret" gets in the way when "insertion feedback" is enabled. Also, the formatting elements steal the drag-drop as well... – aaaidan Oct 15 '12 at 23:00
  • It's like I'm looking for a `droppable="false"` attribute or similar... – aaaidan Oct 15 '12 at 23:00
  • Just a thought based on a quick scan of your fiddle, and it might not be the solution for you, but couldn't you just apply the insertion styling to your column and forget about overlaying an additional div altogether? It's not perfect, but something like this: http://jsfiddle.net/j99se/1/ – net.uk.sweet Oct 15 '12 at 23:20
  • Ah! I like your lateral thinking! Unfortunately, this fiddle is an obtuse/simplified demo: I really do need to be able to overlay feedback. – aaaidan Oct 16 '12 at 01:35
  • You got me wondering if it could be solved by having the feedback element a _child_ of the content element, so bubbling could work. Unfortunately, this doesn't seem to work. In either fiddle, disable feedback, and drag an element over formatted text. You'll see that the format element (, for example) "steals" the event from its parent. How can I stop that? – aaaidan Oct 16 '12 at 01:35

1 Answers1

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!

Community
  • 1
  • 1
net.uk.sweet
  • 12,444
  • 2
  • 24
  • 42
  • Marking this answer as correct because of the `currentTarget` tip. Cheers. – aaaidan Oct 16 '12 at 22:26
  • Here's a more featured jsfiddle, where there's a feedback "caret" as a child of each content element. http://jsfiddle.net/LsYY4/1/ – aaaidan Oct 16 '12 at 22:28
  • Oh hey, your fiddle has a syntax error, and doesn't run in Chrome. The "useCaret" line was missing a close bracket... Updated: http://jsfiddle.net/b3GX7/2/ – aaaidan Oct 16 '12 at 22:37
  • Sorry about that. I'm pretty sure I had a working version (I did test it). Possibly I hadn't saved it or I pasted the wrong version. Glad the answer helped anyway. – net.uk.sweet Oct 16 '12 at 22:55
  • Fixed my fiddle as well. Of course the check for the col class was unnecessary in the end. Defo got mixed up somewhere with my fiddles. – net.uk.sweet Oct 16 '12 at 23:36
  • Perhaps I should ask for a refund? ;P Cheers for the help dude! – aaaidan Oct 18 '12 at 06:13