JavaScript实现拖拽功能

本文实例为大家分享了Javascript实现拖拽功能的具体代码，供大家参考，具体内容如下

盒子拖拽—运用到的有onmousedown事件，onmousemove事件以及onmouseup事件

1、当鼠标点击下去的时候我们需要获取鼠标所在位置的横纵坐标，然后获取盒子的离页面的横纵方向的距离
2、计算出鼠标相对盒子的距离
3、当鼠标移动的时候，获取鼠标移动的距离，在永鼠标此刻的位置减去鼠标相对盒子的距离，获得的是盒子此刻的坐标位置
4、将这个位置赋值给盒子
5、鼠标抬起，清除鼠标移动事件；

代码：

 
 
 
 
 
  .box{
   background-color: pink;
   width:200px;
   height:200px;
   border-radius: 50%;
   position: absolute;
   top:20px;
   left:100px;
  }
 


 

 
 

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持考高分网。