原生JS实现拖拽效果

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

想要让整个元素移动需要三个事件：

鼠标按下 onmousedown
鼠标移动 onmousemove
鼠标抬起 onmouseup

html

 
  
登录会员
 
   关闭
  
  

   

    用户名：
    
   
   

    登录密码：
    
   
  
  
登录会员

JS

var login = document.querySelector('.login');//获取整个弹框的内容
var title = document.querySelector('#title');
 title.addEventListener('mousedown',function(e){
  //当按下鼠标的时候，获取到鼠标在拖拽盒子内的坐标
  //鼠标在页面的坐标 - 大盒子距离浏览器左侧的距离
  var x = e.pageX - login.offsetLeft;
  var y = e.pageY - login.offsetTop;

  //鼠标移动
  document.addEventListener('mousemove',move);

  function move(e){
  //拖拽的盒子定位=鼠标在页面的坐标 - 鼠标在拖拽盒子的坐标
   login.style.left = e.pageX - x + 'px';
   login.style.top = e.pageY - y + 'px';
  }

  //当鼠标抬起的时候，将移动事件删除
  document.addEventListener('mouseup',function(){
   document.removeEventListener('mousemove',move);
  })

 })

CSS部分

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