如何从DropEvent中删除HTML数据？

Question

我正在尝试创建一个内部有芯片元素的contenteditable，它应该是拖拽和放大器。 dropable。你可以在my github repo上看看这个工作效果不佳的事情。

到目前为止我如何工作的故事是另一个故事，在努力争取天之后，我终于能够提出一个似乎有用的解决方案让我们说90所有案例的百分比。

然而，剩下的一个问题是可以选择文本并拖动＆amp;把它放在这个文本区域内：

此处的选择类似于＆＃34; lling <div class="chip">Red Screwdriver</div> an＆＃34;。为了禁止这一点，我看到两个选项：

根本不允许文本选择 - 到目前为止我无法成功 - 或者查看drop事件并检查拖动的HTML内容。我的问题是，我不知道如何才能做到这一点。因为我只想让一个单独的元素被拖放。一次丢弃，我实际上可以比较＆＃34; lling <div class="chip">Red Screwdriver</div> an＆＃34;到我拖动的元素：

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小部件（或＆＃34; span＆＃34;元素）表示。

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

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

您将每个InlineLabel添加到容器中，设置＆＃34; contenteditable＆＃34;在所有小部件上但是＆＃34;可拖动＆＃34;仅限于您允许拖动的那些。

如果你需要能够在任何单词之间删除新筹码，那么每个令牌只能代表一个单词。您也可以防止芯片掉入字内 - 并且只允许在令牌之间的空格中掉落。