Dragend 客户端在 Safari 和 Firefox 上的坐标不一致答案

【问题标题】：Dragend client coordinates incoherent on Safari and FirefoxDragend 客户端在 Safari 和 Firefox 上的坐标不一致
【发布时间】：2018-08-09 01:01:10
【问题描述】：

目前正在通过一些拖放操作进行图像编辑。在 chrome 上有一些功能，但在 Safari 上，dragend 事件返回愚蠢的坐标（e.clientX 和 e.clientY）。刚刚在 Firefox 上试过，现在值是空的。

所以这应该在用户放下图像时返回画布上的鼠标位置，这在 Chrome 上效果很好，但在 Safari 上clientX 太大了，clientY 是负数...

sticker.addEventListener("dragend", (e) => {
    let coords = new Array(
        document.getElementById("canvas").getBoundingClientRect()
    ).map((rect) => {
        console.log(e.clientX(e.clientY));
        return [(e.clientX - rect.left)(e.clientY - rect.top)].join();
    });
});

【问题讨论】：

这能回答你的问题吗？ Drag and drop directive , no e.clientX or e.clientY on drag event in FireFox
还有这个有更多解释：Why is event.clientX incorrectly showing as 0 in firefox for dragend event?

标签： javascript firefox safari drag-and-drop

【解决方案1】：

某些浏览器确实会为此事件返回虚假值，因为它很可能发生在不同的文档上，甚至是在您的页面运行所在的应用程序之外的其他应用程序上。

这是某种信息泄漏，浏览器不喜欢它。

一个简单的解决方法是改为侦听应该在您的画布元素上触发的drop 事件。在这种情况下，承认用户给了你关于拖动内容的所有权限，所以浏览器会给你正确的坐标。

const ctx = canvas.getContext('2d');
ctx.fillText('drop here', 20, 20);
canvas.addEventListener('drop', e => draw(e, 'red'));
canvas.addEventListener('dragover',e=>e.preventDefault());
sticker.addEventListener('dragstart', e=>{e.dataTransfer.setData('text', null)});

function draw(e, color) {
   e.preventDefault();
   const rect = canvas.getBoundingClientRect();
   ctx.beginPath();
   ctx.arc((e.clientX - rect.left), (e.clientY - rect.top), 5, 0, Math.PI*2);
   ctx.fillStyle = color;
   ctx.fill();
}

canvas {
  border:1px solid;
}

<div id="sticker" draggable="true">drag me</div>
<canvas id="canvas"></canvas>

【讨论】：

我确实发现了另一个技巧，因为我必须使用 dragend 而不是 drop 事件，所以在 dragend 我得到了 MousePos 事件的位置，但我承认你的做法更干净。谢谢！

【解决方案2】：

我的解决方案是跟踪拖动回调函数给出的位置（它没有'dragEnd'的问题），然后当'dragEnd'被触发时，我只使用这些临时变量中的最后一个值。

例子：

drag (ev) {
  this.last_x = ev.clientX;
  this.last_y = ev.clientY;
  ...
},
dragEnd (ev) {
  this.x = this.last_x;
  this.y = this.last_y;
  ...
}

希望对你有所帮助。

【讨论】：