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