实现拖拽效果

原理图

实现div块跟随鼠标移动

代码

#box{height: 100px;width: 100px;background-color: blue;position: absolute;}

<div id="box"></div>
<script>
      var jsdiv=document.getElementById("box")
          basex=0
          basey=0
          movex=0
          movey=0
      jsdiv.addEventListener("mousedown",function(e){
        let ee=e||window.e
        basex=ee.pageX
        basey=ee.pageY

        document.onmousemove=function(e){
        let ev=e||window.e
        movex=ev.pageX-basex
        movey=ev.pageY-basey
        basex=ev.pageX
        basey=ev.pageY
        jsdiv.style.left=jsdiv.offsetLeft+movex+"px"
        jsdiv.style.top=jsdiv.offsetTop+movey+"px"
      }
      },false)

      jsdiv.addEventListener("mouseup",function(){
        document.onmousemove=null
      },false)
</script>

疑问
设置box的样式时，若不设置positon：absolute,box会固定位置无法移动；设置positon:relative，box移动会偏离鼠标移动位置。

解析
1.relative：生成相对定位的元素，通过top,bottom,left,right的设置相对于其正常位置进行定位。可通过z-index进行层次分级。

黄色背景的层定位为relative，红色边框区域为其在正常流中的位置。

2.absolute：生成绝对定位的元素，**相对于static定位以外的第一个父元素进行定位。**元素的位置通过"left",“top”,"right"以及"bottom"属性进行规定。可通过z-index进行层次分级。

3.两者区别
relative定位的层总是相对于其最近的父元素，无论其父元素是何种定位方式

图中，红色背景层为relative定位，其直接父元素绿色背景层为默认的static定位。红色背景层的位置为相对绿色背景层top、left个20元素。而如果红色背景层定位为absolute。

可以看到，红色背景层依然定义top:20px；left:20px；但其相对的元素变为定位方式为absolute或relative的黄色背景层。因此，对于absolute定位的层总是相对于其最近的定义为absolute或relative的父层，而这个父层并不一定是其直接父层。如果其父层中都未定义absolute或relative，则其将相对body进行定位。