如何从 DropEvent 中以 HTML 格式获取丢弃的数据？

Question

我正在尝试创建一个contenteditable，其中包含应该可以拖放的芯片元素。你可以在my github repo 上看看这个性能不佳的东西。

到目前为止，我如何让事情发挥作用的故事是另一个故事，经过 天 的努力，现在我终于能够想出一个似乎在 90% 的情况下都有效的解决方案.

剩下的一个问题是可以选择文本并将其拖放到此文本区域内：

此处的选择类似于“lling <div class="chip">Red Screwdriver</div> an”。为了禁止这样做，我看到了两个选项：

要么完全禁止文本选择（到目前为止我无法成功），要么查看 drop 事件并检查拖动的 HTML 内容。我的问题是我不知道我怎么能得到它。由于我只想允许一次拖放一个元素，我实际上可以将“lling <div class="chip">Red Screwdriver</div> an”与我拖动的元素进行比较：

String draggedHtmlDataAsString = event.getDraggedHtmlDataAsString();

if(this.draggedElement.getHtml().equals(draggedHtmlDataAsString) == false) {
    // Don't accept data
} else {
    // Accept data
}

但我不知道如何从 drop 事件中获取这些数据。对我来说，纯 GWT/Java 解决方案与 JavaScrit/JSNI 解决方案一样好。

欢迎任何比这更好的建议。

我也试图禁止选择，但是，看看你自己..

Answer 1

编辑：

要防止选择，请将此 CSS 类添加到您的小部件：

.noselect {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

您可以将文本分解为单独的标记，而不是将文本显示为文本，每个标记由 InlineLabel 小部件（或“span”元素）表示。

例如，您将拥有这些令牌：

• 我们正在销售
• 蓝色螺丝刀
• 和
• 红色螺丝刀

您将每个 InlineLabel 添加到容器中，在所有小部件上设置“contenteditable”，但仅在您允许拖动的小部件上设置“可拖动”。

如果您需要在任何单词之间放置新筹码，则每个标记应仅代表一个单词。您还可以防止筹码被放在单词中 - 并且只允许在标记之间的空格中放置。