視窗拖動

通過原生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);
        })
    })