实现 元素 可拖拽

1、思路

• 记录开始时元素的位置（divX，divY）
• 记录刚开始拖拽时（刚按下鼠标时）鼠标的位置（startMouseX，startMouseY）
• 记录下拖拽结束时（松开鼠标时）鼠标的位置（endMouseX，endMouseY）
• 那么–拖拽结束时，元素的位置为（endMouseX-startMouseX+divX，endMouseY-endMouseY+divY）

2、相关方法

• onmousedown ：按下鼠标时触发
• onmousemove：按住鼠标拖动时触发
• onmouseup：松开鼠标时触发

3、简单实现

// css部分
  *{
   
      padding:0;
      margin:0;
   }
   body{
   
       position: relative;
       height: 500px;
   }
   .drag-item{
   
       width: 300px;
       height: 200px;
       position: absolute;
       top:0;
       left:0;
       background-color: tomato;
   }
// HTML部分
<div class="drag-item"></div>

// js部分
 var dragItem=document.getElementsByClassName("drag-item")[0];
        var divX