Предотвращение перетаскивания изображения из оболочки contentEditable=false

#javascript #firefox #drag-and-drop #contenteditable

#javascript #firefox #перетаскивание #contenteditable

Вопрос:

Использование 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, а в том, как сделать это таким образом, чтобы перетаскивание работало как единое целое, не блокируясь, когда начальной точкой является изображение или создается копия изображения.

Ответ №1:

Кто-то ответил, но затем удалил ответ (или, возможно, мне это приснилось), но ответ заключается в том, что при использовании z-index:-1 для изображения оно не будет перетаскиваться.