在 ContentEditable div 内将块元素从一个点拖动到另一个点答案

【问题标题】：Drag block element from one point to another inside ContentEditable div在 ContentEditable div 内将块元素从一个点拖动到另一个点
【发布时间】：2012-03-28 04:01:43
【问题描述】：

我需要让用户将 contenteditable div 中的元素拖到文本中的另一个点。需要移动的项目设置为 ContentEditable=false。

这可能吗？我似乎找不到任何真正的解决方案。这是我想做的：http://jsfiddle.net/s82Ex/

【问题讨论】：

您使用的是 webkit 浏览器吗？对于像这样的几个 contentEditable 功能，这些是最错误的
我是，Webkit，其次是 Mozilla 将是我的目标受众。我可能会完全放弃对 IE 的支持。
这是stackoverflow.com/q/3006623/1048572的副本？

标签： javascript jquery html drag-and-drop contenteditable

【解决方案1】：

2016 年 10 月 11 日更新

演示和来源： http://so.lucafilosofi.com/drag-block-element-from-one-point-to-another-inside-contenteditable-div

我已更新代码以使用最新的 jquery 和 jquery-ui 并对其进行了重构，以便将来可以在插件中实现并修复各种错误：

现在它还考虑了带有标点符号和额外空格的文本，如下所示：

lorem,ipsum
lorem    ipsum
lorem ipsum
lorem.ipsum

请记住，这仍然是一个概念证明......

【讨论】：

这将是一段很棒的代码。非常感谢！

【解决方案2】：

您的答案来自可靠的官方来源：https://bugs.webkit.org/show_bug.cgi?id=12250

【讨论】：

嗯好的。我最终使用的解决方案是 jQuery UI Sortable。可能不适合所有人，但在我的情况下它工作得很好。