主页 / 问题 / 1235205
Accepted
Мне без сахара
Asked:2022-01-24 01:08:35 +0800 CST2022-01-24 01:08:35 +0800 CST

如何用鼠标拖动div

  • 772

div按住鼠标左键时如何使红色像这样工作而不是什么时候mousemove

const cursor = document.querySelector('.cursor');

document.addEventListener( 'mousemove', e => {
  cursor.style.left = e.clientX + 'px';
  cursor.style.top = e.clientY + 'px';
});
.cursor {
  width: 30px;
  height: 30px;
  transform: translate(-50%,-50%);
  position: absolute;
  background-color: red;
}
<div class="cursor"></div>

javascript

1 个回答

  1. Best Answer

    作为一个粗略的近似：

    const cursor = document.querySelector('.cursor');
let canDrag = false;

document.addEventListener( 'mousemove', e => {
  if (!canDrag)
    return;
    
  cursor.style.left = e.clientX + 'px';
  cursor.style.top = e.clientY + 'px';
});

document.addEventListener( 'mouseup', e => canDrag = false);
cursor.addEventListener( 'mousedown', e => canDrag = true);
    .cursor {
  width: 30px;
  height: 30px;
  transform: translate(-50%,-50%);
  position: absolute;
  background-color: red;
}
    <div class="cursor"></div>

    • 1

相关问题