Question

当前正在通过一些拖放操作来进行图像编辑。在Chrome上具有某些功能，但在野生动物园中，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();
            });

谢谢：）

Answer 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>

Answer 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;
  ...
}

我希望有帮助。

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

2 个答案: