[fix] F12 Drag area calculation and position calculation Error

[KelvinTee58]

Hi, @hcg1023

When using F12 to open, there may be issues with region judgment and position calculation when dragging, as shown in the following video

使用f12 打开时候，拖动时候区域判断和位置计算会出现问题，如下视频， 老哥，目前没有仔细看你的代码，但是区域判断还是有问题的，如果有时间修复的话那就太好了。

[KelvinTee58]

https://github.com/hcg1023/vue3-dnd/assets/32637205/5a8607d7-aeea-48d4-a07d-8ee2674893cd

[KelvinTee58]

DropTargetMonitor中getXXXXXOffset()的5个方法，返回的数据也是有问题的，有一定的偏移。

DragSourceMonitor中getXXXXXOffset()的5个方法目前在我的项目中，没有测试到，所以不知道有没有偏移问题。

[KelvinTee58]

我看了一下，dnd-core，也有这个问题

[hcg1023]

我观察你的窗口处于模拟设备状态，你尝试将模拟设备关掉还会有类似的问题吗？ 我正常开启控制台并没有复现你说的问题

[KelvinTee58]

Hi, @hcg1023 对，我使用的是模拟设备状态，模拟的是不同设备适配逻辑，user agent string 是desktop，f12没有开启这个是没有影响的。

是这样的，我这边的逻辑是计算放置拖拽源，处在接受放置容器的位置。 所以我使用useDrop的DropTargetMonitor.getClientOffset()获得放置的地点{x1，y1}，同时用的getBoundingClientRect()获取容器的的左上角的{x2，y2}的位置，两者的差来计算放置的东西在容器中处于的位置。

但是我处理适配的时候发现了这个问题， 是否还有其他更好的逻辑能处理这个逻辑。 如果能帮到我那就太好了。

[KelvinTee58]

这个是我的部分代码内容：

const [collect, drop] = useDrop(() => ({
  accept: "box",
  drop: (monitor) => {
   let m_x = 0,
      m_y = 0,
      d_x = 0,
      d_y = 0;
    let drop_Rect = document.getElementById("drop").getBoundingClientRect();
    let monitor_offset = monitor.getSourceClientOffset();
    m_x = monitor_offset.x;
    m_y = monitor_offset.y;
    d_x = drop_Rect.x;
    d_y = drop_Rect.y;
    // 获取当前拖动dom 放置的位置
    let drop_x = parseInt(m_x - d_x);
    let drop_y = parseInt(m_y - d_y);
    console.log("drop getSourceClientOffset", drop_x, drop_y);

    // console.log("drop getInitialClientOffset", monitor.getInitialClientOffset());
    // console.log("drop getInitialSourceClientOffset", monitor.getInitialSourceClientOffset());
    // console.log("drop getDifferenceFromInitialOffset", monitor.getDifferenceFromInitialOffset());
    // console.log("drop getClientOffset", monitor.getClientOffset());

    // 后续操作
    // ...
  },
  collect: (monitor) => ({
    isOver: monitor.isOver(),
    canDrop: monitor.canDrop(),
  }),
}));

[hcg1023]

更改deviceType以后我确实复现了你的问题，我观察到可能是缩放引起了对应的问题，当我采用缩放100%的时候，就不会有问题

[hcg1023]

你现在采用的是HTML5backend对吗？你或许可以尝试一下TouchBackend，看看能否解决你的问题，我可能要到晚上才可以试验TouchBackend的可行性

[KelvinTee58]

目前我的项目基本都是用的是h5backend，同时还没考虑到touchbackend的逻辑，所以并没有测试到。

根据你的提示，我修改了缩放，缩放100%，问题消失。 同时我去dnd-core测试，发现问题消失。

看来这个问题有些麻烦，如果没法修复，你可以直接关闭 issue#84。 如果能够修复那就太好了。

[hcg1023]

是的，据我观察属于HTML5Backend的问题，实际上我也不确定他到底是不是一个问题，暂时先不处理这个issue，有时间我试一下TouchBackend，看它是否有类似的问题，如果确定是一个bug的话，我会尝试推进

[KelvinTee58]

ok，麻烦大佬的，如果需要协助可以随时沟通。