js简单的可拖动的div

最新推荐文章于 2024-04-16 19:44:59 发布

看淡江湖

最新推荐文章于 2024-04-16 19:44:59 发布

阅读量327

点赞数 1

分类专栏： html

本文链接：https://blog.csdn.net/hhy1006894859/article/details/82759832

版权

html 专栏收录该内容

6 篇文章 1 订阅

订阅专栏

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>拖动框</title>
    <style>
        #box {
            width: 300px;
            height: 200px;
            background: #f0f0f0;
            cursor: move;
            position: fixed;
            top: 0;
            left: 0;
        }
    </style>
</head>
<body>
<div id="box">

</div>
</body>
</html>
<script type="text/javascript">
    var isDragging = false; // 不可拖动
    var box = document.getElementById("box")
    var x = null,y = null;
    function handleEvent(event) {
        switch (event.type) {
            case 'mousedown':
                isDragging = true;
                x = event.clientX-box.offsetLeft;
                y = event.clientY-box.offsetTop;
                break;
            case 'mouseup':
                isDragging = false;
                break;
            case 'mousemove':
                if(isDragging) {
                    console.log(event.clientX)
                    // 可以进行拖动
                    box.style.left = event.clientX-x+"px";
                    box.style.top = event.clientY-y+"px";
                }
                break;
        }
    }
    box.onmousedown = handleEvent;
    box.onmousemove = handleEvent;
    box.onmouseup = handleEvent;
</script>

看淡江湖

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
js简单的可拖动的div

&lt;!doctype html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;meta name="viewport" content="width=device-width, user-scalable=no, initial
复制链接

扫一扫