JavaScript - 基于拖放（Drag and Drop） API 拖动一个元素

最新推荐文章于 2024-08-25 21:35:38 发布

Heismk

最新推荐文章于 2024-08-25 21:35:38 发布

阅读量655

点赞数 1

本文链接：https://blog.csdn.net/qq_29761395/article/details/121799392

版权

HTML & CSS & JavaScript 专栏收录该内容

66 篇文章 1 订阅

订阅专栏

文章目录

示例
- 思路
- 效果
参考

谷歌浏览器版本信息：版本 96.0.4664.45（正式版本）（64 位）

示例

思路

在拖动开始时，记录被拖动元素的起始坐标；
在拖动结束之后，计算元素的终点坐标与起始坐标的偏移，然后修改元素的位置。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <style type="text/css">
            div {
                position: fixed;
                top: 10px;
                left: 10px;
                width: 200px;
                padding: 5px;
                border: 1px solid rgba(34, 34, 34, 0.8);
                border-radius: 5px;
                background: rgba(34, 34, 34, 0.7);
                color: #FFFFFF;
                text-align: center;
                user-select: none;
                z-index: 20211208;
            }
        </style>
    </head>
    <body>
        <div id="time-container" draggable="true"></div>

        <script type="text/javascript">
            let timerContainer;
            const origin = { x: 0, y: 0 };
            
            window.onload = (event) => {
                // console.log(event);
                main();
            }
            
            // 拖动开始
            document.addEventListener("dragstart", function(event) {
                console.log(event.type, event);
                const target = event.target;
                
                if(target.id !== timerContainer.id) {
                    return;
                }
                
                // 记录被拖动的元素的起始坐标
                origin.x = event.clientX;
                origin.y = event.clientY;
                
                console.log("Origin:", origin.x, origin.y);
                
                target.style.opacity = 0.8;
            }, false);
            
            // 拖动结束
            document.addEventListener("dragend", function(event) {
                console.log(event.type, event);
                const target = event.target;
                
                if(target.id !== timerContainer.id) {
                    return;
                }
                
                target.style.opacity = "";
                
                // 计算拖动结束之后，元素的终点坐标与起始坐标的偏移
                const offsetX = event.clientX - origin.x;
                const offsetY = event.clientY - origin.y;
                
                console.log("Offset:", offsetX, offsetY);
                
                // 修改元素的位置
                target.style.setProperty("top", `${target.offsetTop + offsetY}px`);
                target.style.setProperty("left", target.offsetLeft + offsetX + "px");
            }, false);
            
            document.addEventListener("dragover", function(event) {
                event.preventDefault();
            }, false);
            
            function main() {
                timerContainer = document.getElementById("time-container");
                timerContainer.innerText = getFormatedDateTime();
                
                window.setInterval(() => {
                    timerContainer.innerText = getFormatedDateTime();
                }, 1000);
            }
            
            function getFormatedDateTime() {
                const now = new Date();
                
                const fullYear = now.getFullYear();
                const month = now.getMonth();
                const date = now.getDate();
                const hour = now.getHours();
                const minutes = now.getMinutes();
                const seconds = now.getSeconds();
                
                const formatedDateTime = `${fullYear}.${month}.${date} ${hour}:${minutes}:${seconds}`;
                
                return formatedDateTime;
            }
        </script>
    </body>
</html>