如何在Vaadin 23中通过内置拖放获取相对于DropTarget的坐标？

要解决拖拽释放时获取相对于地图容器的坐标并更新点位位置的问题，可通过原生事件计算相对坐标，以下是具体实现：

1. 配置拖拽源（隐藏原点位） #

给自定义点位组件添加拖拽开始监听，触发时隐藏组件：

PointComponent point = new PointComponent();
// 拖拽开始隐藏原组件
point.addDragStartListener(e -> point.setVisible(false));
// 标记为拖拽源
DragSource.create(point);

2. 配置拖拽目标（计算相对坐标并更新位置） #

在地图容器（父组件，需设置position: relative）的drop监听中，通过原生事件计算相对坐标：

Div mapContainer = new Div();
mapContainer.getStyle().set("position", "relative")
                       .set("width", "800px")
                       .set("height", "600px");

DropTarget<Div> dropTarget = DropTarget.create(mapContainer);
dropTarget.addDropListener(e -> {
    // 获取原生拖拽事件对象
    DragEvent nativeDragEvent = e.getNativeEvent();
    
    // 获取地图容器的页面偏移量
    int containerLeft = mapContainer.getOffsetLeft();
    int containerTop = mapContainer.getOffsetTop();
    
    // 计算相对于地图容器的坐标（clientX/Y是相对于浏览器视口的坐标）
    int relativeX = nativeDragEvent.getClientX() - containerLeft;
    int relativeY = nativeDragEvent.getClientY() - containerTop;
    
    // 若地图容器有滚动条，需额外计算滚动偏移
    relativeX += mapContainer.getScrollLeft();
    relativeY += mapContainer.getScrollTop();
    
    // 更新点位的绝对定位样式
    point.getStyle()
         .set("position", "absolute")
         .set("left", relativeX + "px")
         .set("top", relativeY + "px");
    
    // 拖拽完成后显示点位
    point.setVisible(true);
});

关键说明 #

• 必须确保地图容器的CSSposition为relative，否则点位的absolute定位会相对于整个页面而非容器
• 若需要传递多个点位的数据，可通过dragSource.setDragData(point)在拖拽开始时绑定数据，在drop监听中用e.getDragData()获取
• 测试时注意浏览器的拖拽行为限制，确保组件可正常触发拖拽事件

内容的提问来源于stack exchange，提问作者Flip01