如何在 contenteditable div 中的鼠标位置为 <span>/<div> 使用拖放？

Question

我有一个所见即所得的编辑器，我需要在其中允许拖放元素。

在我的示例中，我有 2 个容器：主容器和第二容器，我可以在其中修改内容（标题除外）

我想允许拖放：

• 元素 MY VAR 1 我想要在主容器或第二容器中的位置。
• 主容器中我想要的第二个容器。

如果可能，我更喜欢只使用 Vanilla javascript。

更简单的方法是什么？使用 IE，它是自动的，但现在使用 EDGE Chromium，我不明白如何重写我的代码。

JSFIDDLE - WYSIWYG EDITOR

HTML：

<div contenteditable="true">
<div class="container_title" contenteditable="false" >
MAIN CONTAINER (forbbiden to write here)
</div>
<div class="container">
Thalassius vero ea tempestate praefectus praetorio praesens ipse quoque adrogantis ingenii, considerans incitationem eius ad multorum augeri discrimina, non maturitate vel consiliis mitigabat, <span draggable="true" class="variable" contenteditable="false">MY VAR 1</span>ut aliquotiens celsae potestates iras principum molliverunt, sed adversando iurgandoque cum parum congrueret, eum ad rabiem potius evibrabat, Augustum actus eius exaggerando creberrime docens, idque, incertum qua mente, ne lateret adfectans. quibus mox Caesar acrius efferatus, velut contumaciae quoddam vexillum altius erigens, sine respectu salutis alienae vel suae ad vertenda opposita instar rapidi fluminis irrevocabili impetu ferebatur.
<div class="container" draggable="true" contenteditable="false">
<div class="container_title">
SECOND CONTAINER (forbbiden to write here)
This containter can be moved indide the main container
</div>
<div contenteditable="true">
Hae duae provinciae bello quondam piratico catervis mixtae praedonum a Servilio pro consule missae sub iugum factae sunt vectigales. et hae quidem regiones velut in prominenti terrarum lingua positae ob orbe eoo monte Amano disparantur.
</div>
</div>
</div>

风格：

.variable {
  background-color:darkblue;
  color:white;
  padding:2px;
}

.container {
  border:1px solid black;
  padding:5px;
}

.container_title {
  background-color:brown;
  color:white;
  padding:5px;
}

感谢您的帮助。