August 9, 2008

Cool tip of the day: Where in the DOM is your mouse?

What, elementFromPoint isn't good enough for you? Well, in my case, no. For Verbosio, it would help a great deal to convert a mouse point to a DOM range point (think scripted selections, drag & drop like Pencil does, etc.). DOM ranges form, among other things, the basis for Mozilla's selection algorithms.

Fortunately, there's a way to figure it out. Just ask the mouse event for the range coordinates. Literally.

window.addEventListener("mousemove", {
  handleEvent: function(aEvt) {
    this.rangeParent = aEvt.rangeParent;
    this.rangeOffset = aEvt.rangeOffset;
  }
}, true);

This comes to us courtesy of the nsIDOMNSUIEvent interface.

The funny thing is, I knew about this back in 2002, when I was writing my book for Sams Publishing. I forgot about it sometime over the past six years (and I admit now that the book's been only partially useful since then, missing certain bits of info I would've liked to know then).

Now, imagine using this to give a visual indicator where a given element you're dragging will be dropped in a HTML or XML document...

Posted by WeirdAl at August 9, 2008 11:18 PM
Comments
Post a comment









Remember personal info?