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