Question

I need to find a way to select all content between two points in the view port. I need that selection to cross HTML elements as well.

Consider a page with two moveable boxes. These boxes are moved by the user around the content. They are absolutely positioned on the screen in front of all the content. When the boxes are moved, I need to select all content in between them. Has anybody come across anything similar? What I’m essentially trying to do is mimic smart phone selection handles.

I know there is a javascript function document.elementFromPoint(x, y). That won’t work in this case because the boxes will be selected as the top most elements at the point.

Answer 1

For WebKit and Opera, you could do this as follows:

• Get the coordinates of your drag handles
• Hide the drag handles
• Call document.caretPositionFromPoint(dragHandleX, dragHandleY) on each drag handle
• Create a new range from the two caret positions (each consisting of a node and an offset within that node) obtained in the previous step
• Select this range
• Unhide your drag handles

In Firefox, mouse events have rangeParent and rangeOffset properties that may help, though I think you’d need to somehow hide the the drag handles before the event fires.

In IE, you could do something like this:

• Get the coordinates of your drag handles
• Hide the drag handles
• Create a TextRange for each drag handle using document.body.createTextRange()
• Call moveToPoint(dragHandleX, dragHandleY) on each TextRange
• Extend the first TextRange to end at the second TextRange using setEndPoint(): firstTextRange.setEndPoint(secondTextRange)
• Select this range: firstTextRange.select()
• Unhide your drag handles