HTML5の contenteditable で absolute したときの、パワーポイントのような機能について

Question

不思議な動作を発見したのですが、どなたかこの使いどころを教えてください。

HTML5のcontenteditableで、下記のようにabsoluteを使った場合なんですが、「ここ」をクリックするとパワーポイントみたいに動かすことができます。

これはどういうときに使うのでしょうか？？

▼動くサンプル
https://jsfiddle.net/3Lr12vc9/

▼そのコード

<div contenteditable="true">
  <span>ここ</span>
</div>	

<style>
div {
  position: relative;
}
span {
  position: absolute;
  background: red;
}
</style>

Comments

[x_x]

どういう動作かわかりませんでした。どのように「動かす」のでしょうか？

[EggBenedict]

「ここ」をクリックすると、「ここ」がパワーポイントで図形を選択したような状態（角などを選択して拡大や縮小ができる状態）になりませんでしょうか？

Answer 1

今の所は参考先にあるように、「編集してスクショする」ぐらいでしょうか。

君はHTML5の contentEditable 属性を知っているか

---

対応は環境によるのかもです。
私の環境では、Firefox(63.0.1)とie(11)は対応して、Chrome(70.0.3538.102)は対応していないですね。「Can I use ･･･」を見る限りでは対応しているハズなのですが･･･

contenteditable attribute

Answer 2

aJaxでサーバに”編集後のHTMLコード”を送れば、コンテンツの更新もできますよね。
確かtwitterもこれを使っているはずです。