'Get Firefox contenteditable drag-and-drop cursor position on dragover/drop event
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 1:[1]
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.
Solution 2:[2]
The standards-based method that all browsers will hopefully eventually support is document.caretPositionFromPoint() and Firefox doesn't support it yet. There is an open bug on it though:
https://bugzilla.mozilla.org/show_bug.cgi?id=654352
Update
Firefox has supported this since version 20.
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|---|
| Solution 1 | Community |
| Solution 2 |