I’ve got a custom draggable element (the drag starts on click and ends on click), which could be dropped on some areas. On mouseover area decides whether it accepts current draggable or not, and changes its color respectively. Everything worked like a charm until client decides that draggable element should be positioned above and to the left of cursor, and that’s where the story starts.
When I moved it, I realized that mouseover event now goes to the draggable, not the area. I did some search and found magic
pointer-events:none
CSS property. Which unfortunately doesn’t work in IE9, and it is our target browser.
Here’s a simple example of what it looks like: http://jsfiddle.net/q9njK/5/
The question is: can I get it working in IE9 in a simpler way than directly watching mousemove and calculating which area is pointer over now?
Edit_1: by “directly watching mousemove” I mean solutions like this: http://jsbin.com/uhuto It would be slow and ugly in the mousemove case. Well, I know, “slow and ugly” is the motto of IE, but if somewhere there exists a bit more elegant solution, I’d like to know it.
Edit_2: seems like IE9 doesn’t support pointer-events: none even for SVG (here’s an example, doesn’t work in IE9: http://jsfiddle.net/q9njK/9/), so there’s no other way but binding to document.mousemove. Or is it?
No, trust me; I’ve tried
Came across the exact same issue as you and ended up banging my head against the wall and finding only what you did; pointer-events work, but not in IE9.
You will have to use js to overcome this – sorry.
All the best,
-Lededje