我正在寻找创建以下内容：
Contenteditable div，其中包含简单的 HTML，例如：
<div contenteditable="true">
<p>This is a paragraph of <b>bold</b> <span class="draggable" draggable="true" contenteditable="false">text</span></p>
<p>This is another para<br />graph</p>
</div>
我的目标是让用户能够编辑 div 的内容，但不能编辑单个.draggable跨度。相反，他们应该能够将它们拖放到他们喜欢的位置 - 但我也希望在拖动时，光标/插入符号会捕捉到单词之间的空格 - 这样用户只能放下span单词之间，而不是它们里面.
理想情况下，一旦用户放下span，它将被准确地放置在单词之间，即它的前后应该有 1 个空格（并且应该删除它之前位置的空格）。
我的主要问题是，如何在拖动span元素时在单词之间捕捉/定位插入符号（闪烁光标） ？我需要这个解决方案在所有现代浏览器中工作，如果可能的话，还需要 IE8 及更高版本。
我的第二个问题是如何确保span在删除它之前和之后总是有一个空格？