防止将图像拖出contentEditable = false包装器

Question

使用Firefox（其他浏览器可能需要其他特定的解决方案，目前我正在搜索Firefox），给出以下代码：

<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>

如果用户尝试通过启动文本来拖动不可编辑的部分，则会选择所有范围并在内容中正确拖动，但如果他在图像上单击，则跨度保持在其位置，将图像的副本（包裹范围）拖入丢弃点。

使用dragstart事件我可以在目标是图像时停止事件，但是：有没有办法选择整个范围以便正确拖动？

问题不在于如何使用DOM选择节点，而是如何以拖放工作方式像整个实体一样工作，而不是在起点是图像或创建时阻止图像副本。

Answer 1

有人回复但后来删除了答案（或者我可能已经梦想过了），但答案是在图像上使用z-index：-1将不会被拖动。