Javascript 如何创建一个简单的文本区域，其中包含实际文本中的可拖动项？

注意：这个问题与我在纯HTML/JavaScript中尝试做这件事的地方有关

我需要的是一个非常简单的文本区域，允许我将可拖动的项目放置到其中。从某种意义上说，它们可以在文本内容中移动——以字符为单位。这里有一个例子

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

这是文本，但由于各种原因，这是可拖动的。

现在，单击“这是可拖动的”，将其向右移动/拖动几个字符将导致：

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

这是文本，而becathis是使用理由的拖拉。

我发现

RichTextArea

基本上可以满足我的需求，但似乎不可能简单地将这样的拖拽内容添加到文本区域。我可以把一些东西拼凑在一起，我想这会达到我想要的效果，但因为这是我的应用程序的一个关键特性，我想要一些理智和可靠的东西。我需要对那些可拖动对象的引用，但

RichTextArea

只允许我通过HTML字符串设置其内容。实际上，我需要回调方法来确定这样一个可拖动的元素何时从DOM树中分离出来

最大的问题其实是我，因为我对GWT和/或web开发本身不是很有经验

所以问题基本上是哪个小部件是一个好的开始

---

---

可以举一个例子。只需写一些文字并将徽标拖到文字区域。您可以在文本中移动它的位置。但正如我提到的，它使用的是

RichTextArea

小部件，它似乎不希望我以编程方式将此类元素添加到文本区域。

这是否有帮助：@Baz否，这实际上是一个如何将文本框拖动到文本所在位置的示例。我想要的是能够在文本区域内拖动HTML元素。但是谢谢：）如果

RichTextArea

已经处理了拖放组件，那么您需要的就是如何以编程方式添加元素，对吗

RichTextArea#setHTML（safeHtml）

with

safeHtml

表示“一些文本”应该可以做到这一点。@Baz问题是我需要对textarea内元素的实际引用。我发现

RichTextArea

位于

iframe

中，因此我无法保留这些引用，因为正如您所提到的，我只能通过设置HTML字符串来添加内容

RichTextArea

就在那一刻为我而死^^这是否有帮助：@Baz否，这实际上是一个如何拖动文本所在文本框的示例。我想要的是能够在文本区域内拖动HTML元素。但是谢谢：）如果

RichTextArea

已经处理了拖放组件，那么您需要的就是如何以编程方式添加元素，对吗

RichTextArea#setHTML（safeHtml）

with

safeHtml

表示“一些文本”应该可以做到这一点。@Baz问题是我需要对textarea内元素的实际引用。我发现

RichTextArea

位于

iframe

中，因此我无法保留这些引用，因为正如您所提到的，我只能通过设置HTML字符串来添加内容

RichTextArea

就在那一刻为我而死^^