Get Firefox contenteditable drag-and-drop cursor position on dragover/drop event

Issue

I’m trying to put together an image uploader. I want to upload images into a contenteditable area with drag-and-drop.

As I drag the file, I see the cursor moving – unless e.preventDefault() was called.

In Chrome, there is a function document.caretRangeFromPoint(x, y) to convert coordinates to cursor position (range).
As far as I’m reading, there is no such in Firefox. (please prove mo wrong)

Is that moving cursor which I can see to be catched somehow? Maybe in the dragover/drop event? As for my experiments, it is not accessible as a range in the dragover event. I wish I was wrong.

Solution

I bumped into the answer in the following thread (after having my own caretPositionFromPoint implemented, damn it :D)

In Firefox, you can simply access it in event.rangeParent and event.rangeOffset respectively.

Hope this saves someone’s butt.

Answered By – zupa

Answer Checked By – Pedro (AngularFixing Volunteer)

Leave a Reply

Your email address will not be published.