鼠标拖曳盒子案例（限定边界）

最新推荐文章于 2023-05-12 11:23:27 发布
原创 最新推荐文章于 2023-05-12 11:23:27 发布 · 529 阅读 · 3 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#js #鼠标拖曳 #鼠标拖动案例

本文讲解了如何通过JavaScript实现在网页上拖动盒子的功能，包括鼠标按下、移动及松开事件的处理，以及关键代码片段的详细解释。适合前端开发者理解盒子拖拽的基本原理和技术实现。

场景

很多场景都需要拖曳盒子，如：

  • 一个弹窗，需要可以拖动。
  • 登录验证，滑动验证。

原理

思路：思路来源_1
思路来源_2
给需要滑动的盒子绑定鼠标按下事件绑定鼠标弹起事件，盒子得脱离文档流，给定位absolute等，需要获取鼠标的初始位置，在鼠标按下事件内定义外层包裹盒子的鼠标移动事件，根据鼠标位置计算出盒子的坐标（left， top），动态赋值盒子坐标，在鼠标弹起事件内取消鼠标移动事件
在这里插入图片描述
本案例还应该-wrap.offsetLeft 和-wrap.offsetTop的，mouse_in_box_x,mouse_in_box_y里减了，那boxX,boxY也要减，因为wrap.offset是固定的，所以是可以消掉的，对结果没影响。

在这里插入图片描述

源码

<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <
最低0.47元/天 解锁文章
Echart5.0实现限制地图不可拖拽出盒子外部（全网独发）
_小郑有点困了的博客
05-14 1756
正常的ecahrt地图，不管是使用了geo的拖拽还是series的拖拽，只要开启了roam，就一定会可能被拖到盒子外部，然后就拖不回来了，没有找到echart的默认配置项可以限制这一情况。5、计算出地图的上下左右110%的极值，当作是x,y坐标系，四个值，leftX，rightX，topY，bottomY，4、地图初始化的位置记为[50%,50%],无论向左、向右、向上、向下，都会是递增的结果。1、首先，默认开启geo的roam属性，允许开启拖拽，缩放。就是计算出来的geo的center距离中心的位置。
Javascript之盒子拖拽（跟随鼠标、边界限定、轨迹回放）
weixin_45779841的博客
03-14 1751
本文通过拖拽案例，实现“跟随鼠标、边界限定、轨迹回放”三大效果； 完整代码中有详尽注释，故不再进行细致讲解； 对于案例中需要注意的重点或易错点问题，会总结在最后。 效果图（仅演示左、上边界限定） 完整代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> ...
vue js拖拽
qq_38985444的博客
08-10 252
methods:{ move(e){ let odiv = e.target; //获取目标元素 //算出鼠标相对元素的位置 let disX = e.clientX - odiv.offsetLeft; let disY = e.clientY - odiv.offsetTop; document.onmousemove = (e.
鼠标按下拖拽移动盒子
gyz15731998001的博客
02-04 581
div { position: relative; width: 200px; height: 200px; background-color: aqua; cursor: move; } 一定要给盒子加定位 var div = document.querySelector('div'); div.addEventLis.
拖动盒子功能案例
qq_51053759的博客
10-22 299
原理： 1、在页面中拖拽的原理：鼠标按下并且移动，之后松开鼠标 2、触发事件是鼠标按下mousedown、鼠标移动mousemove、鼠标松开mouseup 3、拖拽过程：鼠标移动过程中，获得最新的值赋值给box的left和top值 4、鼠标按下触发的事件源是最上面一行，就是id为title的标题 5、鼠标在页面中的坐标减去鼠标在盒子内的坐标就是盒子的真正位置 6、鼠标按下：获取鼠标在盒子中的坐标 7、鼠标移动：鼠标在页面中的坐标减去鼠标在盒子内的坐标赋值给box的left和top 8、鼠标
精选资源
过滤事件_鼠标拖曳显示波形
04-02
在IT领域，尤其是在图形用户界面（GUI）设计和开发中，"过滤事件_鼠标拖曳显示波形"是一个常见的功能需求。此功能涉及到图形处理、数据可视化和用户交互技术，通常应用于信号处理、数据分析或者实时监控等场景。下面...
动态注册事件_鼠标拖曳
04-02
通过设置事件结构中的条件，可以实现动态响应鼠标拖曳，例如，当检测到鼠标按下事件时启动拖动操作，随后在鼠标移动事件中更新对象位置，直到鼠标释放事件发生。 至于`快速接线模块.pdf`，这个文件可能是对如何在...
JS实现可展开折叠层的鼠标拖曳效果
10-23
关于如何利用JavaScript实现一个可以展开折叠并且支持鼠标拖曳效果的图层，以下详细知识点： 1. 基本概念解释 在Web前端开发中，"可展开折叠层"是指在网页上使用JavaScript动态添加的可以被用户打开和收起的区域。...
Unity3D鼠标拖曳物体脚本2
08-08
在Unity3D游戏开发中，实现物体的鼠标拖曳效果是一项常见的交互功能，这使得玩家可以通过鼠标在屏幕上移动对象，从而增加游戏的交互性和沉浸感。以下是一个关于如何使用Unity3D实现鼠标拖曳物体的详细步骤和相关知识...
可拖拽，拉伸的盒子（类似我们的桌面应用框，可以拉伸放大，可以拖拽移动）
可乐加冰的博客
06-18 1006
类似我们的桌面应用框，可以拉伸放大，可以拖拽移动 基于上一篇，我们至于要加上另外两边和另外三个角 只是剩下的拉伸，不仅仅要改变盒子的宽，还要改变left/top了
js实现鼠标拖拽盒子
yang68668的博客
11-08 412
<style> #box { width: 50px; height: 50px; background-color: #e74c3c; position: absolute; } </style> </head> <body> <!-- 定义一个盒子 --> <div id=..
javascript 鼠标拖拽盒子--基础功能版
Ljs_cn的博客
10-14 1052
javascript 鼠标拖拽盒子--基础功能版
原生JS拖拽模型（有限制范围的）
qq_35898059的博客
12-23 1563
原生拖拽模型（有限制范围的） 思路： 确定盒子的移动的方式 ​ 1、 定位的left top值可以让盒子移动 ​ 2、直接margin 顶（在文档流中，不建议） 父元素的padding顶 （更加不建议） ​ 使用left来实现 ，需要设置定位。全部用 相对定位(叠加计算) 绝对定位都能实现(相对是谁，如果代码多，会很乱。)， 这里我们使用 父相子绝（边界相对定位，移动的盒子...
 跟随鼠标移动的盒子
are_gh的博客
01-26 2500
跟随鼠标移动的盒子(包括检测边界值) <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <s.
带边界的鼠标拖拽经典案例，面试必备
weixin_45052104的博客
06-05 281
var arr = []; //存放运动轨迹 var timer = null; //计时器 function drag(id){ var ele = document.getElementById(id); //获取所拖拽的元素对象 //按在元素上 ele.onmousedown = function(evt){ var e = evt || window.event; //事件对象兼容 var...
offset案例：鼠标拖动盒子移动，鼠标松开后 盒子不再跟鼠标移动
tuzi007a的博客
04-11 498
<!DOCTYPE HTML> <html> <head> <title>offset案例：鼠标拖动盒子移动</title> <meta charset="utf-8" /> <style> * { margin: 0; padding: 0; } #box { ...
vue js 可随意拖动盒子 以及禁止拖拽
josiecici的博客
09-29 2156
可拖动弹窗： 1.新建一个js，放置如下js代码 import Vue from 'vue'; //使用Vue.directive()定义一个全局指令 //1.参数一：指令的名称，定义时指令前面不需要写v- //2.参数二：是一个对象，该对象中有相关的操作函数 //3.在调用的时候必须写v- const drag = Vue.directive('drag', { //1.指令绑定到元素上回立刻执行bind函数，只执行一次 //2.每个函数中第一个参数永远是el，表示绑定指令的元素，el参数
使用面向对象实现限制范围的拖拽
weixin_68560422的博客
05-12 143
使用面向对象实现限制范围的拖拽
限制移动范围的拖放
colorsunlight的专栏
03-26 1673
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <script src="../public/js/jquery-1.8.3.js"></script> <script src="../public/js/jquery-ui-1.10.4.custom.js"></script> <script src="../public/js/jquer
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值