原生JS拖拽

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

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

			
输入密码查看加密内容：
			

				
				
			
		
	" id="password" class="list-input">             </div>         </div>         <div id="loginBtn" class="login-button"><a href="javascript:void(0);" id="login-button-submit">登录会员</a></div>     </div> 

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);         })      }) 

<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>