实现鼠标拖动的问题

Question

我想实现一个包含某些元素的可拖动地图。

- ＆GT;请参阅JSFiddle：https://jsfiddle.net/7ndx7s25/7/

通过使用mousedown，mousemove和mouseup，我实现了拖延。 但是我遇到了问题：

1. 当按下鼠标按钮然后移动到窗口外时，我没有收到mouseup事件。重新进入窗口（很久以前释放了鼠标按钮）我的地图仍然认为按钮已关闭并且行为不当。

2. 当地图上有对象时，我在移动这些对象时不会收到mousemove个事件。因此，当我进入和离开这样的对象时，地图会挂起并跳转。

3. 在这些对象上，我仍然想要一个move鼠标光标。我可以更改每个对象上的cursor样式（在Fiddle中我为对象1做了这个例子），但这似乎不是一个好方法。有更优雅的解决方案吗？

Answer 1

你需要例如离开mouseout时要抓住canvas，但当光标移过其他元素时，该事件也会触发。

一个简单的解决方法是简单地将一个类添加到canvas，在那些上设置pointer-events: none。

使用该类，您也可以控制光标，并避免使用脚本进行设置。

Stack snippet

＆＃13;

＆＃13;

updateInfo = function() {
  document.getElementById('info').innerHTML =
    'Position = ' + JSON.stringify(position) +
    '<br />dragInfo = ' + JSON.stringify(dragInfo);
};

const canvas = document.getElementsByTagName('canvas')[0];

let position = { x: 0, y : 0 };
let dragInfo = null;
updateInfo();

canvas.addEventListener('mousedown', function(e) {  
  dragInfo = {
    startEvent: {
      x: e.clientX,
      y: e.clientY,
    },
    startPosition: position
  };
  canvas.classList.add('dragging');
  updateInfo();
});

canvas.addEventListener('mousemove', function(e) {  
  if (dragInfo === null) return;
  
  position = {
    x: dragInfo.startPosition.x - (e.clientX - dragInfo.startEvent.x),
    y: dragInfo.startPosition.y - (e.clientY - dragInfo.startEvent.y)
  };
  updateInfo();
});

canvas.addEventListener('mouseup', function(e) {  
  dragInfo = null;
  canvas.classList.remove('dragging');
  updateInfo();
});

canvas.addEventListener('mouseout', function(e) {
  dragInfo = null;
  canvas.classList.remove('dragging');
  updateInfo();
});

＆＃13;

* {
  user-select: none;
  font-family: monospace;
}
canvas {
  background: black;
  border: 1px solid red;
}
.dragging {
  cursor: move;
}
.obj {
  position: absolute;
  width: 50px;
  height: 50px;
  background: green;
  color: white;
  text-align: center;
  line-height: 50px;
  font-weight: bold;
}
.dragging ~ .obj {
  pointer-events: none;
}

＆＃13;

<div id="myMap-ish">
  <canvas width="500" height="300"></canvas>
  <div class="obj" style="left: 30px; top: 35px">1</div>
  <div class="obj" style="left: 175px; top: 79px">2</div>
  <div class="obj" style="left: 214px; top: 145px">3</div>
  <div class="obj" style="left: 314px; top: 215px">4</div>
</div>
<div id="info"></div>

＆＃13;

＆＃13;

＆＃13;

另一种选择可能是在外包装上使用mouseleave myMap-ish元素，它可以与上面添加的类组合，以简单地处理光标。

mouseout和mouseleave之间的主要区别在于后者在徘徊儿童时不会被激发，如下面的示例所示，因此我们不需要切换{{ 1}}就像我们在第一个样本中所做的那样。

注意，在pointer-events上的第一个示例中使用mouseleave，canvas会有同样的问题，因为＆＃34;其他元素＆＃34 ;不是mouseout。

的孩子

Stack snippet

＆＃13;

＆＃13;

canvas

＆＃13;

updateInfo = function() {
  document.getElementById('info').innerHTML =
    'Position = ' + JSON.stringify(position) +
    '<br />dragInfo = ' + JSON.stringify(dragInfo);
};

const canvas = document.getElementById('myMap-ish');

let position = { x: 0, y : 0 };
let dragInfo = null;
updateInfo();

canvas.addEventListener('mousedown', function(e) {  
  dragInfo = {
    startEvent: {
      x: e.clientX,
      y: e.clientY,
    },
    startPosition: position
  };
  canvas.style.cursor = 'move';
  document.querySelectorAll('.obj')[0].style.cursor = 'move'; // TODO for all objects
  updateInfo();
});

canvas.addEventListener('mousemove', function(e) {  
  if (dragInfo === null) return;
  
  position = {
    x: dragInfo.startPosition.x - (e.clientX - dragInfo.startEvent.x),
    y: dragInfo.startPosition.y - (e.clientY - dragInfo.startEvent.y)
  };
  updateInfo();
});

canvas.addEventListener('mouseup', function(e) {  
  dragInfo = null;
  canvas.style.cursor = 'default';
  document.querySelectorAll('.obj')[0].style.cursor = 'default';  // TODO for all objects
  updateInfo();
});

canvas.addEventListener('mouseleave', function(e) {  
  dragInfo = null;
  canvas.style.cursor = 'default';
  document.querySelectorAll('.obj')[0].style.cursor = 'default';  // TODO for all objects
  updateInfo();
});

＆＃13;

* {
  user-select: none;
  font-family: monospace;
}
canvas {
  background: black;
  border: 1px solid red;
}
.obj {
  position: absolute;
  width: 50px;
  height: 50px;
  background: green;
  color: white;
  text-align: center;
  line-height: 50px;
  font-weight: bold;
}

＆＃13;

＆＃13;

＆＃13;