如何使用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”）重新插入到可编辑的div中，一旦它被拖放到其目标位置。我尝试获取div的值，但不知道如何将可拖动元素插入其中。

以下是代码： https://jsfiddle.net/gsLq7cxy/1/ 感谢您的帮助！

- TheBigDoubleA

---

你可以在这里查看答案：如何在 droppable 的 out 事件中将 jQuery 可拖动对象还原回其原始容器？ - juntapao

不相关...但还是谢谢。 - TheBigDoubleA

你想要在拖放的位置重新插入div吗？比如，如果div被拖放在generate和more之间，那么文本应该显示为generate API more吗？ - Harshit Jain

Answer 1

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

您需要将每个单词包装在像span这样的元素中（请参见此帖子的解决方案），然后使父级可排序：$( ".droppable_tag" ).sortable();。

- C. Cahill