原理

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)
  20. test.style.left = X + 'px'
  21. test.style.top = Y + 'px'
  22. }
  23. test.onmouseup = function (e) {
  24. //当鼠标抬起的时候,拖拽结束
  25. test.onmousemove = null
  26. }
  27. }
  28. </script>
  29. </body>

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

拓展写法

改写成 DOM2级 事件处理程序

拖拽冲突

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

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