js鼠标拖拽移动盒子但只在父框内移动（三种写法）

最新推荐文章于 2024-07-06 00:11:00 发布
最新推荐文章于 2024-07-06 00:11:00 发布
阅读量1.1k 收藏 5
点赞数 1
分类专栏： javascript 文章标签： javascript css html 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/yang68668/article/details/121223336
版权 
// 1 父框没有定位
 <style>
        #box {
            width: 50px;
            height: 50px;
            background-color: #e74c3c;
            position: absolute;
        }
        
        #plus_box {
            width: 300px;
            height: 300px;
            border: 1px solid red;
            margin: 100px auto;
        }
    </style>
</head>

<body>
    <!-- 定义一个盒子 -->
    <div id="plus_box">
        <div id="box"></div>
    </div>
    <script>
        /* 获取box的节点元素 */
        var box = document.getElementById('box')
            /* 获取父盒子 */
        var plus_box = document.getElementById('plus_box');
        /* 定义一个变量 */
        var flag = false;
        /* 定义两个值，保存鼠标按下时初始值 */
        var p_left = 0,
            p_top = 0;
        /* 绑定鼠标按下 */
        box.onmousedown = function(e) {
                flag = true
                    /* 定义两个值，保存鼠标按下时位置 */
                p_left = e.offsetX;
                p_top = e.offsetY;
            }
            /* 鼠标抬起 */
        document.onmouseup = function() {
            flag = false
        }
        var pl = plus_box.offsetLeft
        var pt = plus_box.offsetTop
            /* 鼠标移动 */
        document.onmousemove = function(e) {
            if (!flag) {
                return;
            }
            /* 求坐标点 */
            var x = e.pageX - p_left;
            var y = e.pageY - p_top;

            /* 超出时的 */
            if (x < pl) {
                /* x的值为 */
                x = pl
            }
            if (y < pt) {
                y = pt
            }
            /* 求left最大值 */
            var maxLeft = pl + (plus_box.offsetWidth - box.offsetWidth);
            var maxTop = pt + (plus_box.offsetHeight - box.offsetHeight);
            if (x > maxLeft) {
                x = maxLeft
            }
            if (y > maxTop) {
                y = maxTop
            }
            /* 将坐标赋值给盒子 */
            box.style.left = x + 'px';
            box.style.top = y + 'px';
        }
    </script>
</body>
//2 父框定位
 <style>
        #box {
            width: 50px;
            height: 50px;
            background-color: #e74c3c;
            position: absolute;
        }
        
        #plus_box {
            width: 300px;
            height: 300px;
            border: 1px solid red;
            position: relative;
            margin: 100px auto;
        }
    </style>
</head>

<body>
    <!-- 定义一个盒子 -->
    <div id="plus_box">
        <div id="box"></div>
    </div>
    <script>
        /* 获取box的节点元素 */
        var box = document.getElementById('box')
            /* 获取父盒子 */
        var plus_box = document.getElementById('plus_box');
        /* 定义一个变量 */
        var flag = false;
        /* 定义两个值，保存鼠标按下时初始值 */
        var p_left = 0,
            p_top = 0;
        /* 绑定鼠标按下 */
        box.onmousedown = function(e) {
                flag = true
                    /* 定义两个值，保存鼠标按下时位置 */
                p_left = e.offsetX;
                p_top = e.offsetY;
            }
            /* 鼠标抬起 */
        document.onmouseup = function() {
            flag = false
        }
        var pl = plus_box.offsetLeft
        var pt = plus_box.offsetTop
            /* 鼠标移动 */
        document.onmousemove = function(e) {
            if (!flag) {
                return;
            }
            /* 求坐标点 */
            var x = e.pageX - p_left - plus_box.offsetLeft;
            var y = e.pageY - p_top - plus_box.offsetTop;

            /* 超出时的 */
            if (x < 0) {
                /* x的值为 */
                x = 0
            }
            if (y < 0) {
                y = 0
            }
            /* 求left最大值 */
            var maxLeft = plus_box.offsetWidth - box.offsetWidth;
            var maxTop = plus_box.offsetHeight - box.offsetHeight;
            if (x > maxLeft) {
                x = maxLeft
            }
            if (y > maxTop) {
                y = maxTop
            }
            /* 将坐标赋值给盒子 */
            box.style.left = x + 'px';
            box.style.top = y + 'px';
        }
    </script>
</body>
//3 优化后的写法
<style>
        * {
            margin: 0;
            padding: 0;
        }
        
        #box {
            width: 100px;
            height: 100px;
            background-color: #e74c3c;
            position: absolute;
        }
        
        #big-box {
            width: 600px;
            height: 600px;
            border: 1px solid slateblue;
            margin: 100px auto;
            position: relative;
        }
    </style>
</head>

<body>
    <div id="big-box">
        <div id="box"></div>
    </div>
    <!-- 
    父盒子定位
   -->
    <script>
        //获取box元素节点
        var box = document.getElementById('box');
        //获取大盒子
        var bigBox = document.getElementById('big-box');


        //定义一个变量，用于控制盒子是否可以移动。默认值为false，不可以动。
        var flag = false;
        //定义两个值，用于保存 鼠标按下时，鼠标距离盒子边框的偏移量。
        var b_left = 0,
            b_top = 0;

        //绑定鼠标按下
        box.onmousedown = function(e) {
                flag = true;
                b_left = e.offsetX;
                b_top = e.offsetY;
                //绑定鼠标移动事件
                document.onmousemove = function(e) {
                    //求当前盒子的left和top值  e.pageX - e.offsetX
                    //求坐标点 
                    var x = e.pageX - b_left - bigBox.offsetLeft;
                    var y = e.pageY - b_top - bigBox.offsetTop;
                    //left的最大值 ： 大盒子宽-小盒子宽
                    var maxLeft = bigBox.offsetWidth - box.offsetWidth;
                    //top的最大值  大盒子高-小盒子高
                    var maxTop = bigBox.offsetHeight - box.offsetHeight;
                    //移动之前判断是否超出边界
                    if (x < 0) {
                        x = 0;
                    } else if (x > maxLeft) {
                        x = maxLeft
                    }
                    if (y < 0) {
                        y = 0;
                    } else if (y > maxTop) {
                        y = maxTop;
                    }

                    //将坐标赋值给盒子
                    box.style.left = x + "px";
                    box.style.top = y + "px";

                }
            }
            //绑定鼠标抬起
        document.onmouseup = function() {
            document.onmousemove = null;
        }
    </script>
</body>

 

清酒独酌
关注
  • 1
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
【JS案例】：实现盒子拖拽功能
m0_50785976的博客
09-09 3309
JS小案例：实现盒子拖拽功能 HTML部分： <div id="box"></div> CSS部分： #box{ width: 100px; height: 100px; background-color: pink; position: absolute; top: 0; left: 0; } JS部分： 方法一： window.onload=function(){
父元素中拖动子元素实现
害怕的博客
01-17 2227
结果 过程 鼠标点下事件的event为鼠标相对于浏览器窗口的位置信息 子元素要在父元素范围内拖动，那就有一个允许拖动的范围，子元素本身有宽高，这也是拖动范围计算要考虑的 首先获取mousedown的点相对于子元素边界的距离 上面计算得到的距离也作为子元素边界到容器边界的距离极值 mouseBounds得到的结果为鼠标相对于浏览器可以移动的范围 因父元素相对于浏览器窗口还有一个相对的距离，为上面...
js实现一个小的div在一个大的div的范围内拖动
2302_77290281的博客
05-18 250
js实现一个小的div在一个大的div的范围内拖动
javascript拖动元素(盒子)
IT菜鸟
04-20 144
此处例子获取的盒子为 element-ui 的 dialog 组件。
js实现拖拽盒子
lzsan_的博客
05-22 318
用一个变量来表示鼠标按下不松开，并且没有离开element元素 计算鼠标移动的距离加上元素原来的left,top的值，就是元素的位置 offsetLeft ：box1元素原来的left距离 offsetTop ：box1元素原来top的距离 startX： 鼠标第一次点击的x坐标 startY： 鼠标第一次点击的y坐标 var canDrag = false; var box1 = document.querySelector(".box1"); ...
js 实现拖动元素（是否限制在某个容器中拖动）
PrimaryColor
11-19 1099
效果图： fixed定位，针对弹窗的移动： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <styl...
盒子拖拽效果，原生js实现
weixin_43447266的博客
03-11 1460
原生js实现拖拽效果
js实现鼠标拖拽盒子
yang68668的博客
11-08 330
<style> #box { width: 50px; height: 50px; background-color: #e74c3c; position: absolute; } </style> </head> <body> <!-- 定义一个盒子 --> <div id=..
JavaScript中for循环的几种写法与效率总结
10-20
每个接触JS的开发人员都不可避免的与for循环打交道，毕竟这是遍历必不可少的工具之一。...下面这篇文章就主要介绍了JavaScript中几种for循环的写法与效率,需要的朋友可以参考借鉴，下面来一起看看吧。
小键盘控制鼠标移动点击器[成品+源码]
03-18
这种程序在某些情况下非常实用，比如对于手部残疾或者鼠标操作不便的用户，或者在进行精确控制鼠标时，小键盘可以提供更稳定的输入方式。 描述中的“源码介绍：看到有人在要这个就放出来吧，写法超级简单，只要稍微...
JavaScript创建命名空间的5种写法
10-25
在JavaScript编程中，命名空间是一个重要的概念，它的主要目的是解决全局变量可能引起的命名冲突问题。本文将详细介绍JavaScript中创建命名空间的5种常见方法。 首先，我们来看一下全局变量引发的命名冲突问题。在...
大漠插件模拟鼠标移动带轨迹转易语言源码
06-02
在IT行业中，编程和自动化是常见的任务之一，而模拟鼠标移动和轨迹记录是自动化过程中的重要环节。这里我们将深入探讨“大漠插件”以及如何使用它来模拟鼠标移动并结合易语言（EasyLanguage）编写源码实现这一功能。...
js鼠标点击事件在各个浏览器中的写法及Event对象属性介绍
10-27
各个主流浏览器德鼠标点击事件，方便使用时查询，整理还算是很详细吧，感兴趣的你可以参考下啊，希望本文对你有所帮助
javascript动态添加div
庞凡 坚定自己踏实走好每一步
03-28 6964
网上有很多的实现js动态添加div的方法,在这里我展示一种使用insertBefore(),和innerHTML方式。 前台代码 js动态添加div 获得question下的所有divv 动态添加div js代码 function createQuest
浏览器内实现盒子拖拽
weixin_44901335的博客
04-15 222
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>拖拽</title> <style> #box{ width: 100px; height: 100px; background: red; ...
JavaScript拖拽函数
qq_42460322的博客
11-05 259
拖拽函数
原生JS拖拽模型（有限制范围的）
qq_35898059的博客
12-23 1271
原生拖拽模型（有限制范围的） 思路： 确定盒子的移动的方式 ​ 1、 定位的left top值可以让盒子移动 ​ 2、直接margin 顶（在文档流中，不建议） 父元素的padding顶 （更加不建议） ​ 使用left来实现 ，需要设置定位。全部用 相对定位(叠加计算) 绝对定位都能实现(相对是谁，如果代码多，会很乱。)， 这里我们使用 父相子绝（边界相对定位，移动的盒子...
js实现元素的拖拽问题及分类练习汇总
qq_43594636的博客
11-10 463
js高阶之-元素在限制范围内的拖动 一.补充知识 元素的offsetLeft offsetTop offsetLeft 和 offsetTop 属性返回当前元素的偏移位置。IE 怪异模式以父元素为参照进行偏移位置，DOM 标准模式以最近定位元素为参照进行偏移的位置,offsetLeft是离其最近的已经定位的元素，如果没有就相对于body元素计算 ...
ES6 新特性有哪些
最新发布
weixin_64684095的博客
07-06 1030
1. 拥有块级作用域，这意味着在 if 语句、for 循环、while 循环等代码块中声明的 let 变量，只在该代码块内有效。2. 不允许在同一作用域内重复声明同一个变量1. 也具有块级作用域。2. 声明时必须进行初始化赋值，且赋值后不能再重新赋值修改其值。3. 如果 const 声明的是一个对象或数组，虽然不能重新赋值整个对象或数组，但可以修改对象的属性值或数组的元素值。
移动抽奖页面js写法
05-31
移动抽奖页面的JS实现方式有很多种，下面是一种比较简单的实现方式： 1. 首先，需要定义一个抽奖的数组，包含每个奖品的概率和奖品名称，例如： ```javascript var awards = [ { probability: 0.1, name: '一等奖' }, { probability: 0.2, name: '二等奖' }, { probability: 0.3, name: '三等奖' }, { probability: 0.4, name: '安慰奖' } ]; ``` 2. 接着，需要编写一个函数来实现抽奖的逻辑，例如： ```javascript function lottery() { var random = Math.random(); // 生成一个随机数 var sum = 0; for (var i = 0; i < awards.length; i++) { sum += awards[i].probability; if (random <= sum) { return awards[i].name; // 返回中奖的奖品名称 } } } ``` 3. 最后，在页面中添加一个抽奖按钮，并绑定点击事件，例如： ```html <button id="lotteryBtn">开始抽奖</button> ``` ```javascript var lotteryBtn = document.getElementById('lotteryBtn'); lotteryBtn.addEventListener('click', function() { var result = lottery(); // 调用抽奖函数 alert('恭喜您获得了' + result); // 弹出中奖结果 }); ``` 这样就完成了一个简单的移动抽奖页面的JS实现。当然，如果想要实现更复杂的效果，还可以添加动画、音效等特效。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值