JavaScript 拖拽效果-动画#

1const oDiv = document.getElementById('box')
2let disX = (disY = 0)
3
4oDiv.onmousedown = function (ev) {
5  var ev = ev || event
6  disX = ev.offsetX
7  disY = ev.offsetY
8
9  document.onmousemove = function (ev) {
10    var ev = ev || event
11    let l = ev.clientX - disX
12    let t = ev.clientY - disY
13
14    // 边界限定
15    if (l <= 0)
16      l = 0
17    else if (l >= document.documentElement.clientWidth - oDiv.offsetWidth)
18      l = document.documentElement.clientWidth - oDiv.offsetWidth
19
20    if (t <= 0)
21      t = 0
22    else if (t >= document.documentElement.clientHeight - oDiv.offsetHeight)
23      t = document.documentElement.clientHeight - oDiv.offsetHeight
24
25    // 吸附效果
26    /* if(l <= 100){
27    l = 0;
28    }else if(l >= document.documentElement.clientWidth - oDiv.offsetWidth - 100){
29    l = document.documentElement.clientWidth - oDiv.offsetWidth;
30    }
31
32    if(t <= 0){
33    t = 0;
34    }else if(t >= document.documentElement.clientHeight - oDiv.offsetHeight){
35    t = document.documentElement.clientHeight - oDiv.offsetHeight;
36    } */
37
38    oDiv.style.left = `${l}px`
39    oDiv.style.top = `${t}px`
40  }
41
42  document.onmouseup = function () {
43    this.onmousemove = null
44    this.onmouseup = null
45  }
46}