contenteditable 要素

div 要素などの直接編集などブラウザ上で直感的に操作可能となる属性だが・・・

draggable 要素の子 (あるいは孫) 要素としての contenteditable 要素

複数のブラウザ間での挙動の違いにより実装として利用する際に注意が必要な模様

draggableParent-contenteditableChild

<div draggable="true">
  draggable
  <div contenteditable="true">content editable</div>
</div>

contenteditable, draggable それぞれの期待される挙動が確認される

HTML の記述のみでは draggable による挙動は実現されない
draggable="true" となる親要素を持つ contenteditable="true" の要素において
クリックによるカーソル位置が要素の先頭となる
- 十字キーなどで移動したのち、一度フォーカスを外して (onblur)
  再度フォーカスしたところカーソル位置が変更されていないようなので
  クリックによるカーソル移動が行われないと思われる

親、あるいは先祖となる要素に draggable="true" となる要素が存在しなければ
contenteditable な要素に対しクリックがそのまま編集個所の指定となりそう・・

<div draggable="false">
  draggable
  <div contenteditable="true">content editable</div>
</div>

:has により先祖をことごとく無効化してしまう

draggable無効化

jQuery(':has([contenteditable])').prop('draggable', false);