Vaadin 14拖动目标类不起作用答案

【问题标题】：Vaadin 14 drag over target class not workingVaadin 14拖动目标类不起作用
【发布时间】：2021-06-28 08:07:06
【问题描述】：

当拖动目标在其上方时，我想设置放置目标的样式。根据本教程https://vaadin.com/docs/v14/flow/dnd/drop-target v-drag-over-target 类应该在我的拖动目标将超过放置目标但我的组件不使用此类时自动使用。拖动目标的示例正常工作。这是它在我的应用程序中的外观

我的 CSS：

.v-dragged.pin-fast-access-btn {
    outline: 1px solid hotpink;
    opacity: 1
}
.v-drag-over-target.pin-fast-access-btn{
    outline: 1px solid lightgreen;
}

【问题讨论】：

标签： css drag-and-drop vaadin

【解决方案1】：

选项 1：~~您的样式以 fast-access-btn 为目标，而 DOM 树似乎包含 pin-fast-access-btn 元素。修复不匹配有帮助吗？~~（没有。）

选项 2：我没有尝试使用 Vaadin 14 进行拖放（我主要处理 Vaadin 8），但我认为应该将 v-drag-over-target 应用于放置目标而不是突出显示的元素。您是否为显示面板 1 的内容卡创建了放置目标，或者您的放置目标位于 DOM 树中的什么位置？

【讨论】：

抱歉，我从其他类名为 fast-access-btn 的组件中复制了此处的样式，这在此处也不起作用。现在我纠正了它。在图片中可以看到，我拖动的组件有类名 pin-fast-access-btn v-dragged 所以 v-dragged 会自动添加到类名中。基于此，我想我的放置目标的类名应该是这样的：pin-fast-access-btn v-drag-over-target
谢谢，很高兴排除了这一点:) 编辑了我的答案。
这些卡片是其他卡片的拖放目标，所以这个面板 1 应该是放置目标。当我放下它时，我的放下事件的 cod 工作正常
并且放置目标肯定是专门针对该元素的，而不是您只能通过扩展 DOM 树中的内层才能看到的东西？您创建它的方式与创建拖动源的方式相同吗？
这些卡片的组件正在实现 DragSource、DropTarget 并在构造函数 im adding setActive(true); setDraggable(true); and then for each card im 中设置 addDropListener、addDragStartListener 和 addDragEndListener，所以一切都以相同的方式创建