原生JS拖拽

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

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

　　

HTML

<div id="login" >	<!-- 点击title拖拽 -->  <div id="title" >登录会员 <!-- title end -->   <span><a id="closeBtn" href="javascript:void(0);" >关闭</a></span>  </div>  <div >   <div >    <label>用户名：</label>    <input type="text" placeholder="请输入用户名" name="info[username]" id="username" >   </div>   <div >    <label>登录密码：</label>    <input type="password" placeholder="请输入登录密码" name="info[password]" id="password" >   </div>  </div>  <div id="loginBtn" ><a href="javascript:void(0);" id="login-button-submit">登录会员</a></div> </div>

　　

页面效果如下：

 

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

<style>	 *{   padding: 0px;   margin: 0px;  }  .login {   display: block;   width: 512px;   height: 280px;   position: fixed;   border: #ebebeb solid 1px;   left: 50%;   top: 50%;   background: #ffffff;   box-shadow: 0px 0px 20px #ddd;   z-index: 9999;   transform: translate(-50%, -50%);  }  .login-title {   width: 100%;   margin: 10px 0px 0px 0px;   text-align: center;   line-height: 40px;   height: 40px;   font-size: 18px;   position: relative;   cursor: move;  }  .login-input-content {   margin-top: 20px;  }  .login-button {   width: 50%;   margin: 30px auto 0px auto;   line-height: 40px;   font-size: 14px;   border: #ebebeb 1px solid;   text-align: center;  }  .login-bg {   display: none;   width: 100%;   height: 100%;   position: fixed;   top: 0px;   left: 0px;   background: rgba(0, 0, 0, .3);  }  a {   text-decoration: none;   color: #000000;  }  .login-button a {   display: block;  }  .login-input input.list-input {   float: left;   line-height: 35px;   height: 35px;   width: 350px;   border: #ebebeb 1px solid;   text-indent: 5px;  }  .login-input {   overflow: hidden;   margin: 0px 0px 20px 0px;  }  .login-input label {   float: left;   width: 90px;   padding-right: 10px;   text-align: right;   line-height: 35px;   height: 35px;   font-size: 14px;  }  .login-title span {   position: absolute;   font-size: 12px;   right: -20px;   top: -30px;   background: #ffffff;   border: #ebebeb solid 1px;   width: 40px;   height: 40px;   border-radius: 20px;  }</style>

　　

 转载于：https://blog.csdn.net/weixin_47300932/article/details/110405164

原文转载：http://www.shaoqun.com/a/494640.html

Zozo：https://www.ikjzd.com/w/2180

海豚村：https://www.ikjzd.com/w/1779

执御：https://www.ikjzd.com/w/717.html

想要让整个元素移动需要三个事件：鼠标按下onmousedown鼠标移动onmousemove鼠标抬起onmouseup　　HTML<divid="login"> <!--点击title拖拽--><divid="title">登录会员<!--titleend--><span><aid="
1号团：1号团
hemingway：hemingway
印尼大选将尘埃落定，看印尼跨境先驱如何把握这个千亿市场：印尼大选将尘埃落定，看印尼跨境先驱如何把握这个千亿市场
共探新经济：2019-2020全球新消费品牌盛典圆满收官！：共探新经济：2019-2020全球新消费品牌盛典圆满收官！
正佳广场极地海洋世界参观需要多长时间？正佳极地海洋馆几个小：正佳广场极地海洋世界参观需要多长时间？正佳极地海洋馆几个小