js完成元素拖拽

被挪动元素必需为相对定位

position:absolute;

Dom

  <div class = "move-container" >
      <div class = "move" style="position:absolute; width:100px; height:100px; background:gray">
      </div>
  </div> 

Javasrtipt

var moveElem = document.querySelector('.move'); //待拖拽元素      

var dragging; //是不是激活拖拽状况
var tLeft, tTop; //鼠标按下时相对于选中元素的位移

//监听鼠标按下事宜
document.addEventListener('mousedown', function(e) {
    if (e.target == moveElem) {
        
        dragging = true; //激活拖拽状况
       var moveElemRect = moveElem.getBoundingClientRect();
        tLeft = e.clientX - moveElemRect.left; //鼠标按下时和选中元素的坐标偏移:x坐标
        tTop = e.clientY - moveElemRect.top; //鼠标按下时和选中元素的坐标偏移:y坐标
    }
});

//监听鼠标摊开事宜
document.addEventListener('mouseup', function(e) {
    dragging = false;
});

//监听鼠标挪动事宜
document.addEventListener('mousemove', function(e) {
    if (dragging) {
        var moveX = e.clientX - tLeft, 
              moveY = e.clientY - tTop;

        moveElem.style.left = moveX + 'px';
        moveElem.style.top = moveY + 'px';
      
    }
});