Question

我有一个简单的演示，我的目标是拖动和放大将一个元素拖放到canvas元素上，以便在画布上的那个确切位置绘制一些东西。我几乎无处不在，但是，Win8 IE10在drop事件中报告奇怪的clientX/clientY鼠标坐标。

Here is the demo in CodePen，我可以在IE10和其他人之间复制不一致的坐标。

您会注意到在IE10中，坐标与其他浏览器非常不同。我想解决这个演示，以便在包括IE10在内的所有现代浏览器中坐标都是一致的，但是卡住了。

我的模式使用此cross-browser mouse coordinates示例。

代码：

HTML

<div class="draggable-element"></div>
<canvas></canvas>

CSS

.draggable-element {
  width: 16px;
  height: 16px;
  background: red;
  cursor: pointer;
}

canvas {
  width: 600px;
  height: 600px;
  margin: 60px 0 0;
  background: #ccc;
}

Javascript（加载jQuery）

'use strict';

var $el = $('.draggable-element');
$el[0].draggable = true;

var $canvas = $('canvas');

$canvas.on('dragover', function (event) {
  event.preventDefault();
});

$canvas.on('drop', function (event) {
  event.preventDefault();

  var targetRectangle = event.target.getBoundingClientRect();

  var coords = {
    x: event.originalEvent.clientX - targetRectangle.left,
    y: event.originalEvent.clientY - targetRectangle.top };

  alert('x: ' + coords.x + ', y: ' + coords.y);
});

更新经过进一步测试，这个bug似乎特别存在于Win8 IE10中。如果我了解更多，我会更新。

Win8 IE10 HTML5 Drag＆amp;丢弃 - 报告错误的clientX / clientY坐标

0 个答案: