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

1
votes

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.

2
javascriptdrag-and-dropcursorrangecaret

2 Answers

3
votes

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.

1
votes

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.