Chrome 中与 Windows 规模相关的拖放问题 (125%)答案

【问题标题】：Drag and drop issue in Chrome related to Windows scale (125%)Chrome 中与 Windows 规模相关的拖放问题 (125%)
【发布时间】：2019-02-23 17:29:09
【问题描述】：

我在 Chrome (v69.0.3497.100) 上遇到拖放问题。具体来说，当 Windows 缩放比例不是 100% 时，一些拖放事件会被触发，即使它们不应该触发。

查看stackblitz 示例，并尝试将“蓝色”矩形拖动到自身上方（只需拖动，向下移动一点并放下）。如果 Windows 缩放设置为 100%（浏览器缩放也是 100%），则按预期触发一个事件 (dragEnter)（检查控制台）。但是，如果 Windows 缩放设置为 125%（但浏览器缩放仍为 100%），则会触发三个事件（两个 dragEnter 和一个 dragLeave），并且我预计只会触发一个事件，因为元素被拖动并掉在自己身上（就像 100% 比例级别的情况一样）。

可能是因为这是 Windows 缩放（而不是浏览器的缩放），所以左侧（“浅红色”）矩形比它出现的要大，它低于右侧矩形，并且事件被传播到它，尽管我不能t 证明，因为所有元素在检查器中都有正确的大小。

这似乎不会在最新的 Firefox、IE 或 Edge 中发生。

有谁知道为什么会发生这种情况以及如何解决？

【问题讨论】：

在您的事件处理程序中添加 console.log(event.target.className) 可能会更容易查看正在发生的事情。我看到在 Chromium 69 中以任意比例触发多个事件。
原始元素应该触发 dragstart 和 dragend 处理程序。并且目标元素应该触发拖放处理程序。我的建议是在处理双向拖放之前先让单向拖放成功。
您好，感谢您的 cmets，添加 className 确认事件被错误触发（但我已经猜到了 :)）。我不使用 Chromium，但这是一个简单的布局，不应触发多个事件，您不同意吗？我不明白第二条评论，我知道拖放时触发了哪些事件，我有一种工作方式，但我也需要这种双向工作......也许你可以澄清你的意思通过那条评论？再次感谢您的关注，欢迎任何评论或帮助，我已经坚持了几天，快疯了。 :D
拖动蓝色 div 正在调用第一个 div 的放置事件，我们可以提供以 px (:host) 为单位的宽度，它适用于蓝色 div 上的前几个拖动事件，但不能递归
感谢您的回复。我为放置事件做了console.log，当我们拖动right（蓝色）矩形时，left（浅红色）矩形没有发生drop事件。另外，在:host 上设置固定宽度不符合我的要求，所以不行。

标签： javascript html google-chrome drag-and-drop

【解决方案1】：

我越是关注这个问题，就越觉得是 Chromium 问题。前几天我发了一个问题，然后我想为它设置一个赏金，然后我找到了你的，我相信它们是相互关联的：Subpixel scroll issue, can't set scrollTop properly on Chrome 69。

在 Chromium 问题跟踪器中有一些与比例舍入问题相关的错误报告：link 1、link 2... 我还创建了自己的错误：link 3。应该有更多的信息，但需要太多时间来研究。我认为我们可以共同努力并引起对这个问题的更多关注，例如，如果它是 Chromium 的责任，帮助他们澄清和确定优先级。

【讨论】：

【解决方案2】：

我对版本 76.0.3809.100（64 位）有同样的问题。

我还偏移了图像以补偿我在你的 stackbliz 示例中得到的奇怪偏移。

但是在缩放 200% 时，我需要将计算出的 dragImage 偏移量乘以 4 !!!

300% 时为 9
350% 时为 12.25

你看到模式了吗？？？！

我担心我对这个问题的破解/修复。不确定它是否只是在Windows上，如果它只是桌面。但现在我想我必须做 window.devicePixelRatio^2 才能继续我的工作。

【讨论】：