利用JavaScript编写一个拖拽功能

　　介绍

利用JavaScript编写一个拖拽功能?相信很多没有经验的人对此束手无策,为此本文总结了问题出现的原因和解决方法,通过这篇文章希望你能解决这个问题。

<强>具体内容如下

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

鼠标按下> & lt; div id=發ogin"类=發ogin"比; 　　& lt; !——点击标题拖拽——比; 　　& lt; div id=皌itle"类=發ogin-title"祝辞登录会员 　　& lt; !——标题结束——比; 　　& lt; span> & lt; id=癱loseBtn"href=癹avascript:无效(0);“类=癱lose-login"祝辞关闭& lt;/a> & lt;/span> 　　& lt;/div> 　　& lt; div类=發ogin-input-content"祝辞 　　& lt; div类=發ogin-input"祝辞 　　& lt; label>用户名:& lt;/label> 　　& lt;输入类型=皌ext"占位符=扒胧淙胗没啊居没俊皀ame=靶畔d=皍sername"类=發ist-input"比; 　　& lt;/div> 　　& lt; div类=發ogin-input"祝辞 　　& lt; label>登录密码:& lt;/label> 　　& lt;输入类型=皃assword"占位符=扒胧淙氲锹济苈搿皀ame=靶畔?密码),id=皃assword"类=發ist-input"比; 　　& lt;/div> 　　& lt;/div> 　　& lt; div id=發oginBtn"类=發ogin-button"祝辞& lt; a href=癹avascript:无效(0);“id=發ogin-button-submit"祝辞登录会员& lt;/a> & lt;/div> 　　& lt;/div>

利用JavaScript编写一个拖拽功能

JS 

 var登录=document.querySelector (& # 39; .login& # 39;);//获取整个弹框的内容
　　var title=document.querySelector(& # 39; #冠军# 39;);
　　title.addEventListener (& # 39; mousedown& # 39;,函数(e) {//当按下鼠标的时候,获取到鼠标在拖拽盒子内的坐标//鼠标在页面的坐标——大盒子距离浏览器左侧的距离
　　var x=e。pageX - login.offsetLeft;
　　var y=e。pageY - login.offsetTop;//鼠标移动
　　document.addEventListener (& # 39; mousemove& # 39;,移动);
　　
　　函数移动(e) {//拖拽的盒子定位=鼠标在页面的坐标——鼠标在拖拽盒子的坐标
　　login.style。左=e。pageX - x + & # 39; px # 39;;
　　login.style。=e。pageY - y + & # 39; px # 39;;
　　}//当鼠标抬起的时候,将移动事件删除
　　document.addEventListener (& # 39; mouseup # 39;,函数(){
　　document.removeEventListener (& # 39; mousemove& # 39;,移动);
　　}）
　　
　　})

CSS部分

& lt; style> 　　* { 　　填充:0 px; 　　保证金:0 px; 　　} 　　.login { 　　显示:块; 　　宽度:512 px; 　　身高:280 px; 　　位置:固定; 　　边界:# ebebeb固体1 px; 　　左:50%; 　　上图:50%; 　　背景:# ffffff; 　　不必:0 px 0 px 20 px # ddd; 　　z - index: 9999; 　　变换:翻译(-50%,-50%); 　　} 　　.login-title { 　　宽度:100%; 　　保证金:10 px 0 px 0 px 0 px; 　　text-align:中心; 　　行高:40像素; 　　高度:40像素; 　　字体大小:18 px; 　　位置:相对; 　　光标:移动; 　　} 　　.login-input-content { 　　margin-top: 20 px; 　　} 　　.login-button { 　　宽度:50%; 　　保证金:30 px汽车0 px汽车; 　　行高:40像素; 　　字体大小:14 px; 　　边界:# ebebeb 1 px固体; 　　text-align:中心; 　　} 　　.login-bg { 　　显示:没有; 　　宽度:100%; 　　高度:100%; 　　位置:固定; 　　上图:0 px; 　　左:0 px; 　　背景:rgba (0, 0, 0, 0。3); 　　} 　　一个{ 　　文字修饰:没有; 　　颜色:# 000000; 　　} 　　.login-button一个{ 　　显示:块; 　　} 　　.login-input输入。list-input { 　　浮:左; 　　行高:35 px; 　　高度:35 px; 　　宽度:350 px; 　　边界:# ebebeb 1 px固体; 　　indent: 5 px; 　　} 　　.login-input { 　　溢出:隐藏; 　　保证金:0 px 0 px 20 px 0 px; 　　} 　　{.login-input标签 　　浮:左; 　　宽度:90 px; 　　padding-right: 10 px; 　　text-align:正确; 　　行高:35 px; 　　高度:35 px; 　　字体大小:14 px; 　　} 　　.login-title跨度{ 　　位置:绝对的; 　　字体大小:12 px; 　　右:-20 px; 　　前:-30像素; 　　背景:# ffffff; 　　边界:# ebebeb固体1 px; 　　宽度:40像素; 　　高度:40像素; 　　border - radius: 20 px; 　　} 　　& lt;/style>

看完上述内容,你们掌握利用JavaScript编写一个拖拽功能的方法了吗?如果还想学到更多技能或想了解更多相关内容,欢迎关注行业资讯频道,感谢各位的阅读!

利用JavaScript编写一个拖拽功能