How to drag & drop text within contenteditable div with jQuery UI

Question

I'm trying to move a draggable text in a div that is contenteditable.

This is the 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>

The goal is to have that text (in this case "API") reinsert into the contenteditable div once it's been dropped at the place where it's been dropped. I've tried getting the value of the div but don't know how to insert the draggable into it.

This is the code: https://jsfiddle.net/gsLq7cxy/1/

Any help appreciated!

Answer 1

You're probably better off using the sortable method instead; it has all of the properties of draggable, but reorders all items based on where an item is dropped.

You'll need to wrap each word in an element like span (see this post for solution) and then make the parent sortable: $( ".droppable_tag" ).sortable();.