javascript盒子的拖拽（鼠标事件练习）

最新推荐文章于 2024-07-24 23:00:08 发布

我的代码很挫

最新推荐文章于 2024-07-24 23:00:08 发布

阅读量1.2k

点赞数 2

分类专栏：前端文章标签：前端 js

本文链接：https://blog.csdn.net/weixin_43260290/article/details/82817387

版权

前端专栏收录该内容

1 篇文章 0 订阅

订阅专栏

主要利用触发鼠标事件实现对css的更改，进而实现盒子位置的变动

首先新建一个div

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>盒子移动</title>
    <link rel="stylesheet" href="css/css-1.css">
    <script type="text/javascript" src="js/js-1.js"></script>
</head>
<body>
    <div id="box" ></div>
</body>
</html>

为这个盒子写入样式

#box{
    position:absolute;
    display:block;
    width:200px;
    height:200px;
    background:red;
    cursor:move;
}

在这里插入图片描述

以下是js代码

window.onload = function() {
    var box = document.getElementById('box');
    box.onmousedown = function (e) {
        var X = e.clientX - box.offsetLeft;
        var Y = e.clientY - box.offsetTop;

        document.onmousemove = function(e)
        {
            var left = e.clientX - X;  
            var top = e.clientY - Y;
            //确保盒子左，上不会被拖出屏幕，右，下不会出现滚动条
            if(left<0){
                left=0;
            }else if(left > window.innerWidth - box.offsetWidth){
                left = window.innerWidth - box.offsetWidth;
            }
            if(top<0){
                top=0;
            }else if(top > window.innerHeight- box.offsetHeight){
                top = window.innerHeight - box.offsetHeight;
            }
            //更改css样式
            box.style.left = left + 'px';
            box.style.top = top + 'px';
        };
        document.onmouseup = function (e) {
            this.onmousemove = null;
        };
    };
};

以上没有考虑浏览器兼容问题

我的代码很挫

关注

2
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
javascript盒子的拖拽（鼠标事件练习）

主要利用触发鼠标事件实现对css的更改，进而实现盒子位置的变动首先新建一个div&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;盒子移动&lt;/title&gt; &lt;link
复制链接

扫一扫

专栏目录