Using Firefox (other browsers might require other specific solutions, for the moment I'm searching just for Firefox), given this code:
<p contentEditable="true" >
Some text in the content ...
<span contentEditable="false" style="border:1px dotted gray">-not editable <img src="test.jpg"> end-</span>
and some more text after it
</p>
If the user tries to drag the non-editable part by starting on the text, all the span is selected and correctly dragged around in the content, but if he clicks instead on the image, then the span remains at its position and a copy of the image (with a wrapping span) is dragged into the drop spot.
Using the dragstart event I can stop the event if the target is the image, but: is there any way to select the whole span so it's dragged correctly?
The question isn't about how to select a node using the DOM, but how to do it in a way that the drag&drop works like a whole entity, without being blocked when the start point is the image or creating a copy of the image.
