web前端-原生鼠标拖拽效果

鼠标拖拽效果分为3个事件

1. 鼠标按下事件onmousedown, 事件源是点击的对象, 就是我们要拖拽的对象
2. 鼠标移动事件onmousemove, 注意下这里, 鼠标移动的时候的事件源就是document
3. 鼠标抬起事件onmouseup, 当我们鼠标抬起的时候我们需要把鼠标移动事件清空.

代码如下:

<span class='span' id='span'></span>

.span{
  position:absolute;
  width: 100px;
  height: 100px;
  background-color: #0094ff;
  cursor:pointer;
}

// 获取到需要拖拽的标签
var span = document.getElementById('span');
// 绑定鼠标按下事件
span.onmousedown = function(event){
  var event = event || window.event;
  // 计算鼠标按下位置距离元素的左边的距离,
  // `offsetLeft`, 就是元素的左边距离元素的`offsetParent`的偏移量
  var chaX = event.clientX - span.offsetLeft;
  // 计算鼠标按下位置距离元素的上边的距离, 
  //`offsetTop`, 就是元素的左边距离元素的`offsetParent`的偏移量, 
  //计算出来的值就是鼠标点击的位置距离元素左边的距离
  var chaY = event.clientY - span.offsetTop;
  document.onmousemove = function(event){
    var event = event || window.event;
    /* 元素的定位是通过左上角的left和top来定位, 
    * 所以我们只需要设置left和top就可以了, 
    * 但是left和top值我们需要通过鼠标的位置减掉鼠标距离元素左边的距离, 
    * 这样才能保证我们鼠标点击的位置不变
    */
    span.style.left = event.clientX - chaX + 'px';
    span.style.top = event.clientY - chaY + 'px';
  }
  // 给我们最大的事件源绑定鼠标抬起事件, 当抬起的时候, 移除鼠标移动事件.
  document.onmouseup = function(){
  document.onmousemove = null;
}
}

原生鼠标拖拽效果Demo