How to create a simple text area containing draggable elements inside the actual text?

Question

Note: this question is related to this , where I am trying to do this in pure HTML / JavaScript.

I need a very simple text area that allows me to place draggable elements in it. Draggable in the sense that they can move inside the text content - the character. Here is an example

<div contenteditable="true"/> This is text whereas <div draggable="true">this is draggable</div> because of reasons. </div> 

Now clicking on <div draggable="true">this is draggable</div> and moving / dragging a few characters to the right, you will get:

 <div contenteditable="true"/> This is text whereas beca<div draggable="true">this is draggable</div>use of reasons. </div> 

I found that RichTextArea will mainly serve my needs, but it is not possible to add such drag and drop to the text area just like that. I could hack something together, I think I will do what I want, but since this is part of the key function in my application, I want something sensible and reliable. I need links to those draggable objects, but RichTextArea only allows me to set its contents via HTML strings. Actually, I need callback methods to determine when such a draggable item, for example, is detached from the DOM tree.

The biggest problem actually is me, because in fact I am not very versed in GWT and / or web development.

So the question is, which of the Widget would be a good place to start?

---

An example could be as shown here . Just write text and drag the logo into the text area, you can move it inside the text. But, as I mentioned, it uses the RichTextArea widget, which does not seem to want me to add such elements programmatically in the text area.