欢迎光临
我的个人博客网站

javaScript实现弹窗拖动


窗口拖动

通过原生javaScript进行窗口拖动的实现

一、功能

通过javaScript实现自定义容器的拖动操作,通过拖动标题部分进行窗口的移动

二、实现思路

通过鼠标左键按下触发条件

通过event获取鼠标按下位置距离顶部和左边的距离,减去容器距离浏览器顶部和左边的距离实现距离的判定

嵌套鼠标移动事件,在移动时通过鼠标当前的位置减去上一步获取的位置信息,从而实现位置更新

嵌套鼠标弹起事件,在鼠标左键松开后移除鼠标移动监听事件

注意:容器必须使用定位-position

<!--html-->     <!-- 添加表单 -->     <form id="addForm">         <!-- 标题 -->         <div id="title">弹窗拖动示例<span class="fr">×</span></div>     </form> 
/*css样式*/  #addForm {     width: 400px;     height: 400px;     background: #7B68EE;     position: absolute;     margin: auto;     top: 50%;     left: 50%;     /* 实现鼠标拖拽使用css3效果 */     transform: translate(-50%, -50%); }  /* 标题 */ #title {     display: flex;     justify-content: space-between;     box-sizing: border-box;     padding: 0 10px;     height: 40px;     background: #8B008B;     color: #fff;     line-height: 35px;     font-size: 25px; } 
/*javascript*/      let title = document.querySelector("#title");     let addForm = document.querySelector("#addForm");        title.addEventListener("mousedown", function (e) {         let x = e.pageX - addForm.offsetLeft;         let y = e.pageY - addForm.offsetTop;           document.addEventListener("mousemove", move);         function move(e) {             addForm.style.left = e.pageX - x + 'px';             addForm.style.top = e.pageY - y + 'px';         }          document.addEventListener("mouseup", function (e) {             document.removeEventListener("mousemove", move);         })     }) 
赞(0) 打赏
未经允许不得转载:张拓的天空 » javaScript实现弹窗拖动
分享到: 更多 (0)

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

专业的IT技术经验分享 更专业 更方便

联系我们本站主机

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏