js拖拽以及H5的原生拖拽原理讲解

1. js拖拽
   css

    * {
           margin: 0;
           padding: 0;
       }
       .box {
           position: absolute;
           left: 100px;
           top: 100px;
           width: 200px;
           height: 200px;
           background: #00b38a;
           z-index: 100;
       }
   

   html

    <div class="box" id="box"></div>
   

   js

   //获取元素
   let box=document.getElementById('box');
   //鼠标按下开始拖拽
   box.onmousedown=dragStart;
   //鼠标抬起停止拖拽
   box.onmouseup=dragEnd;
   //dragStart开始拖拽
   function dragStart(e) {
      // 开始拖拽的时候需要获取的鼠标的起始位置以及盒子的起始位置，这里使用自定义属性保存起来方便使用
      // 鼠标初始坐标
      this.startX=e.pageX;
      this.startY=e.pageY;
      //盒子初始位置，小编的样式直接写在行内的，不是行内则不能使用this.style.left/top来获取，要基于getComputend来获取
      this.startL=parseFloat(getComputedStyle(this)['left']);
      this.startT=parseFloat(getComputedStyle(this)['top']);
      //盒子移动方法dragMove
      //为什么不给盒子的onmousemove绑定？
      //因为如果给盒子绑定的话会出现鼠标移动太快而盒子的计算速度跟不上鼠标移动速度从而导致出现鼠标丢失的现象，因为盒子只有那么大一点，所以
      //利用事件委托的机制让document也就是整个页面来替盒子监测鼠标移动的位置
      document.onmousemove=dragMove.bind(this);
   }
   //dragEnd停止拖拽
   function dragEnd() {
      document.onmousemove=null;
   }
   //dragMove进行拖拽
   function dragMove(e) {
      //鼠标每一次移动后的结束位置
      let endX=e.pageX,
          endY=e.pageY,
          //鼠标移动距离
          moveX=endX-this.startX,
          moveY=endY-this.startY;
      //鼠标移动距离加上盒子初始位置就是移动后盒子应该在的位置
      //这里小编没有加上边界判断，有需要的可以加上边界判断，可视窗口宽高-盒子宽高就是可以到达的最大宽高，最小宽高则是0
      this.style.left=moveX+this.startL+'px';
      this.style.top=moveY+this.startT+'px';
   }
   

2. H5原生实现拖拽
   H5的原生实现拖拽那就相对简单了 ，我们只需要在要拖拽的元素行内样式上加上draggable=true即可；如下

   	<div class="litBox" id="litBox" draggable="true"></div>
   

   这样这个元素就可以进行拖拽了
   
   H5实现拖拽其中有两个名词：
   被拖拽元素：就是指我们拖拽的那个元素
   放置元素：将来被拖拽元素要放置的元素

   H5原生拖拽是基于原生拖拽事件完成的

   let litBox=document.getElementById('box');
   
   //ondragstart事件在拖拽开始时触发
   litBox.ondragstart=function(){
   console.log(‘拖拽开始了’)
   }
   
   //ondrag事件在拖拽时触发
   litBox.ondrag=function(){
   console.lg('正在拖拽')
   }
   
   //ondragend事件在拖拽结束时触发
   litBox.ondragend=function(){
   console.log('拖拽结束')
   }
   // 以上事件都是绑给拖拽元素的，对应的还有一些放置元素的相关事件；
   
   // ondragenter 当被拖拽元素进入放置元素时触发
   bigBox.ondragenter = function () {
     console.log('enter');
   };
   
   // ondragover 当被拖拽元素经过放置元素时，触发放置元素的该事件
   bigBox.ondragover = function (e) {
     console.log('over');
     e.preventDefault();  // 如果要使用放置元素的ondrop事件，必须阻止dragover的默认行为；
   };
   
   // ondragleave 当被拖拽元素离开放置元素时，触发放置元素的该事件
   bigBox.ondragleave = function () {
     console.log('leave');
   };
   
   // ondrop 当被拖拽元素在放置元素上松开鼠标（结束拖拽）时触发放置元素的该事件
   bigBox.ondrop = function () {
     console.log('drop');
     this.appendChild(litBox);
   };