腾讯一面

发表于 | 分类于

实现鼠标拖拽dom

昨天面试时紧张，把事件忘记了。
今天实现一遍。

1
<div id="test">拖拽</div>

1
2
3
4
5
6
7
8
9
10
11
#test{
  width:100px;
  height:100px;
  border:1px solid black;
  background-color:rgba(235,235,235,1);
  line-height:100px;
  text-align:center;
  border-radius:50px;
  position:absolute;
  user-select:none;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
window.onload=()=>{
  var dragElement=document.getElementById("test");
  dragElement.onmousedown=(e)=>{
    var domLeft=e.clientX-dragElement.offsetLeft;
    var domTop=e.clientY-dragElement.offsetTop;
    dragElement.onmousemove=(e)=>{
      dragElement.style.left=e.clientX-domLeft+'px';
      dragElement.style.top=e.clientY-domTop+'px';
    }
    dragElement.onmouseup=(e)=>{
      dragElement.onmousemove=null;
      dragElement.onmouseup=null;
    }
  }
}

还有一种减少重绘的优化方法。

1
<div id="test">拖拽</div>

1
2
3
4
5
6
7
8
9
10
#test{
  width:100px;
  height:100px;
  border:1px solid black;
  background-color:rgba(235,235,235,1);
  line-height:100px;
  text-align:center;
  border-radius:50px;
  user-select:none;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
window.onload = () => {
  var dragElement = document.getElementById("test");
  dragElement.onmousedown = (e) => {
    var data = /\w*.?(-*\d+).*?(-*\d+)/.exec(dragElement.style.transform);
    var x = data ? +data[1] : 0;
    var y = data ? +data[2] : 0;
    var mouseLeft = e.clientX;
    var mouseTop = e.clientY;
    dragElement.onmousemove = (e) => {
      var mouseLeftCurr = e.clientX;
      var mouseTopCurr = e.clientY;
      dragElement.style.transform = `translate(${mouseLeftCurr-mouseLeft+x}px,${mouseTopCurr-mouseTop+y}px)`;
    }
    dragElement.onmouseup = (e) => {
      dragElement.onmousemove = null;
      dragElement.onmouseup = null;
    }
  }
}
本文结束啦感谢您的阅读
undefined