javascript - 如何使用 jQuery UI 在 contenteditable div 中拖放文本

Question

我正在尝试移动可内容编辑的 div 中的可拖动文本。

这是div:

<div class="droppable_tag" contenteditable="true">Facebook shuts down friends data <a contenteditable="false" class="draggable_tag">API</a> to generate more trust among users</div>

目标是让该文本(在本例中为“API”)在其被放置在放置位置后重新插入到 contenteditable div 中。我试过获取 div 的值，但不知道如何将可拖动对象插入其中。

这是代码: https://jsfiddle.net/gsLq7cxy/1/

感谢任何帮助!

Answer 1

您最好使用 sortable method反而;它具有可拖动的所有属性，但会根据项目的放置位置重新排序所有项目。

您需要将每个单词包装在一个元素中，例如 span(请参阅 this post 了解解决方案)，然后使父级可排序:$( ".droppable_tag").sortable(); .