如何在实际文本中创建包含可拖动项目的简单文本区域？

Question

注意：此问题与this one有关，我尝试在纯HTML / JavaScript中执行此操作。

我需要的是一个非常简单的文本区域，允许我为其放置可拖动的项目。可拖动的意思是它们可以在文本内容中移动 - 性格明智。这是一个例子

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

现在点击<div draggable="true">this is draggable</div>并向右移动/拖动几个字符会导致：

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

我发现RichTextArea基本上可以满足我的需求，但似乎不可能像文本区域那样添加这样的可拖动内容。我可以 hack 在一起我认为这会做我想要的但是因为这是我的应用程序中的一个关键功能的一部分我想要一些理智和可靠的东西。我需要引用那些可拖动的对象，但RichTextArea只允许我通过HTML字符串设置它的内容。实际上我需要回调方法来确定何时这样一个可拖动的元素例如与DOM树分离。

最大的问题实际上是因为我对GWT和/或网络开发本身并不十分熟悉。

所以问题基本上是哪个Widget是一个好的开始？

示例可以是seen here。只需编写一些文本并将徽标拖到文本区域即可。您可以在文本中移动它的位置。但就像我提到的那样，它正在使用RichTextArea小部件，它似乎不希望我以编程方式将这些元素添加到文本区域。