原理

image.png
鼠标按下时，拖拽开始
首先确定的是当前元素距离视口的 位置0
然后确定的是当前鼠标按的位置距离当前视口 位置1
接着是拖拽后当前鼠标按的位置距离当前视口 位置2

可以通过计算得知 var X = x0 + (x2 - x1)

简单实现

鼠标按下的事件：
onmousedown //鼠标按下之后的位置，也就是鼠标点击的时候位置
onmousemove
onmouseup

  1. <body>
  2.     <div id="test"></div>
  3.     <script>
  4.         var test = document.getElementById("test")
  5.         test.onmousedown = function (e) {
  6.             //元素距离定位父级的x轴以及y轴距离
  7.             var x0 = this.offsetLeft
  8.             var y0 = this.offsetTop
  9.             //鼠标距离视口左上角的x轴及y轴的距离
  10.             var x1 = e.clientX
  11.             var y1 = e.clientY
  12.             test.onmousemove = function (e) {
  13.                 e = e || event
  14.                 // 此时鼠标距离视口左上角的x轴及y轴的距离
  15.                 x2 = e.clientX
  16.                 y2 = e.clientY
  17.                 // 计算此时元素应该距离视口左上角的x轴及y轴距离
  18.                 var X = x0 + (x2 - x1)
  19.                 var Y = y0 + (y2 - y1)
  21.                 test.style.left = X + 'px'
  22.                 test.style.top = Y + 'px'
  23.             }
  24.             test.onmouseup = function (e) {
  25.                 //当鼠标抬起的时候，拖拽结束
  26.                 test.onmousemove = null
  27.             }
  28.         }
  30.     </script>
  31. </body>

拓展 拖拽时候的css cursor 属性 cursor :move (被悬浮的物体可被移动)

拓展写法

改写成 DOM2级 事件处理程序

拖拽冲突

由于文字和图片默认支持原生拖放，如果将原生拖放和模拟拖拽掺杂在一起，如果拖放的元素内容存在文字，且文字被选中会触发文字的原生拖拽效果

解决：在mousedown事件阻止浏览器的默认行为即可