5

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!

TheBigDoubleA
  • 432
  • 2
  • 7
  • 26
  • You could check with the answer here: [Revert a jQuery draggable object back to its original container on out event of droppable](http://stackoverflow.com/questions/5735270/revert-a-jquery-draggable-object-back-to-its-original-container-on-out-event-of) – juntapao Apr 29 '15 at 12:03
  • not related... but thanks anyway – TheBigDoubleA Apr 29 '15 at 13:08
  • Do you want to reinsert the div where it is dropped? As in if the div is dropped between generate and more then the text should read `generate API more`? – Harshit Jain Apr 29 '15 at 14:33

1 Answers1

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();.

Community
  • 1
  • 1
C. Cahill
  • 94
  • 1
  • 2
  • 9