我希望创建以下内容：
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放弃之前和之后始终有空格？