防止拖出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在图像上它不会被拖动。