如何使用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的值但不知道如何将draggable插入其中.

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

任何帮助赞赏!

Answer 1

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

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