Javascript 如何在contenteditable div中创建跨浏览器可拖动元素？

我希望创建以下内容：

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

，而不能放在单词内部

理想情况下，一旦用户放下

span

，它将恰好放在单词之间，也就是说，前后应该有一个空格（并且应该删除以前位置的空格）

我的主要问题是，拖动

span

元素时，如何在单词之间捕捉/定位插入符号（闪烁的光标）？我需要这个解决方案，以在所有现代浏览器工作，如果可能的话，也IE8及以上

---

我的第二个问题是我如何确保在删除

span

之后在前后都有一个空格？

问题是…？@Teemu我更新了我的帖子，提出了更清晰的问题。我建议你忘记IE8，实际上你需要为它创建一个不同的应用程序。旧IEs中的事件处理，尤其是文本选择处理模型与现代浏览器完全不同。关于编程的细节，你已经赢得了代表，你很清楚，这是如何运作的…看看这个问题-有一个例子可以帮助你。