用JavaScript写可移动小块

最新推荐文章于 2021-10-16 14:18:16 发布

xiaoweibaba

最新推荐文章于 2021-10-16 14:18:16 发布

阅读量675

点赞数

文章标签： JavaScript 可移动div 鼠标事件

本文链接：https://blog.csdn.net/xiaoweidreamy/article/details/82758146

版权

01 JavaScript 可移动的div

我们最终要改变的是box的top和left，

（一）所以如何计算box的top和left呢。
- 步骤一）首先在鼠标按下时，
  - 获取到鼠标点击位置与小块的边的距离(这个数值在在本次移动中保持不变): divX ,divY
    鼠标距离页面的距离，e.pageX ,e.pageY
    box 距离页面的距离， box.offsetLeft , box.offsetTop
    divX + box.offsetLeft = e.pageX (Y的同理)
- 步骤二）鼠标移动时，
  - 我们需要获取到新的 box 距离页面的距离（即box.offsetLeft , box.offsetTop，即box.style.left ，box.style.top）
    box.style.left = e.pageX（获取到新的鼠标到页面的距离） - divX（步骤一计算出来的值） (Y的同理)
（二）整个过程中，我们需要一个变量判断鼠标的状态 mouse
- 鼠标按下，mouse = true;
  鼠标松开，mouse = false;
（三）注意：
- 1）在onmousemove中要有参数e ，获取的是新的鼠标的位置到页面的距离
- 2）在onmousemove中要判断一下 mouse的值，确保只有在鼠标按下的时候才能移动
- 3）onmousemove（移动）和onmouseup（松开）在onmousedown（按下）函数里面的

分析图
在这里插入图片描述

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>01 JS 可移动的div</title>
    <style>
        #box{
            position:absolute;
            top:0;
            left:0;
            width:100px;
            height:100px;
            background:#f00;
        }
    </style>
</head>
<body>
<div id="box"></div>
<script>
    var box = document.getElementById("box");
    box.onmousedown = function(e){
        var mouse = true;
        console.log("我被按下了！");
        var divX = e.pageX - box.offsetLeft;
        var divY = e.pageY - box.offsetTop;
        console.log("此时鼠标距离小块的边距为X ="+divX+"Y="+divY+"这个距离接下来不变");
        box.onmousemove = function(e){
            if(mouse){
                console.log("我被移动了！");
                box.style.left = (e.pageX - divX) +"px";
                box.style.top = (e.pageY - divY) +"px";
                console.log("小块的top:"+box.style.top+"小块的left:"+box.style.left);
            }
        };
        box.onmouseup = function(){
            console.log("我被松开了");
            mouse = false;
        }
    }
</script>
</body>
</html>

xiaoweibaba

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
用JavaScript写可移动小块

01 JavaScript 可移动的div如何插入一段漂亮的代码片思路分析图如何插入一段漂亮的代码片思路我们最终要改变的是box的top和left，（一）所以如何计算box的top和left呢。步骤一）首先在鼠标按下时，获取到鼠标点击位置与小块的边的距离(这个数值在在本次移动中保持不变): divX ,divY- 项目获取到鼠标点击位置与小块的边的距离(这个数值在...
复制链接

扫一扫