拖动盒子，并且不超出浏览器可视区 。拖动窗口、其他元素的思路也与这个案例类似

最新推荐文章于 2023-05-12 11:23:27 发布
最新推荐文章于 2023-05-12 11:23:27 发布
阅读量979 收藏 3
点赞数 1
分类专栏： JavaScript 文章标签： js 前端 css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45102514/article/details/118057400
版权

拖动盒子，并且不超出浏览器可视区 。拖动窗口、其他元素的思路也与这个案例类似

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
   
            margin: 0;
            padding: 0;
        }
        
        #box {
   
            position: relative;
            left: 20px;
            top: 20px;
            width: 200px;
            height: 200px;
            background-color: rgb(37, 159, 207);
        }
最低0.47元/天 解锁文章
风景再美，既已路过
关注
  • 1
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
Echart5.0实现限制地图不可拖拽出盒子外部（全网独发）
_小郑有点困了的博客
05-14 1161
正常的ecahrt地图，不管是使用了geo的拖拽还是series的拖拽，只要开启了roam，就一定会可能被拖到盒子外部，然后就拖不回来了，没有找到echart的默认配置项可以限制这一情况。5、计算出地图的上下左右110%的极值，当作是x,y坐标系，四个值，leftX，rightX，topY，bottomY，4、地图初始化的位置记为[50%,50%],无论向左、向右、向上、向下，都会是递增的结果。1、首先，默认开启geo的roam属性，允许开启拖拽，缩放。就是计算出来的geo的center距离中心的位置。
js 实现拖动元素（是否限制在某个容器中拖动）
PrimaryColor
11-19 1097
效果图： 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拖拽模型（有限制范围的）
qq_35898059的博客
12-23 1261
原生拖拽模型（有限制范围的） 思路： 确定盒子的移动的方式 ​ 1、 定位的left top值可以让盒子移动 ​ 2、直接margin 顶（在文档流中，不建议） 父元素的padding顶 （更加不建议） ​ 使用left来实现 ，需要设置定位。全部用 相对定位(叠加计算) 绝对定位都能实现(相对是谁，如果代码多，会很乱。)， 这里我们使用 父相子绝（边界相对定位，移动的盒子...
使用面向对象实现限制范围的拖拽
weixin_68560422的博客
05-12 57
使用面向对象实现限制范围的拖拽
限制移动范围的拖放
colorsunlight的专栏
03-26 1559
<!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
鼠标拖曳盒子案例（限定边界）
usernotdefined的博客
08-23 349
场景 很多场景都需要拖曳盒子，如： 一个弹窗，需要可以拖动。 登录验证，滑动验证。 原理 思路：思路来源_1 思路来源_2 给需要滑动的盒子绑定鼠标按下事件绑定鼠标弹起事件，盒子得脱离文档流，给定位absolute等，需要获取鼠标的初始位置，在鼠标按下事件内定义外层包裹盒子的鼠标移动事件，根据鼠标位置计算出盒子的坐标（left， top），动态赋值盒子坐标，在鼠标弹起事件内取消鼠标移动事件 源码 <!DOCTYPE html> <html lang="zh-CN"> &lt
vue js拖拽
qq_38985444的博客
08-10 184
methods:{ move(e){ let odiv = e.target; //获取目标元素 //算出鼠标相对元素的位置 let disX = e.clientX - odiv.offsetLeft; let disY = e.clientY - odiv.offsetTop; document.onmousemove = (e.
vue实现拖拽的简单案例 不超出可视区域
10-16
主要为大家详细介绍了vue实现拖拽的简单案例，不超出可视区域，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
vue 实现左右拖拽元素并且不超过他的父元素的宽度
10-17
主要介绍了vue 实现左右拖拽元素并且不超过他的父元素的宽度,需要的朋友可以参考下
一个多浏览器支持的背景变暗的div并可拖动提示窗口功能的代码
09-06
标题中的“一个多浏览器支持的背景变暗的div并可拖动提示窗口功能的代码”指的是在网页中实现一个跨浏览器的弹出提示窗口，该窗口不仅具有背景变暗的效果，还可以被用户拖动。这个功能在多种浏览器环境下，包括IE、...
鼠标拖拽拖动盒子时，与盒子内某些点击事件冲突问题解决
最新发布
09-15
鼠标拖拽拖动盒子时，与盒子内某些点击事件冲突问题解决
Vue实现元素拖拽不超过页面宽高
前端路上坎坎坷坷，总有一天站在顶峰仰望世界！！！
06-23 1567
vue实现元素拖拽不超过页面宽高
javaScript如何实现鼠标的拖拽效果，并且拖拽限制不超过页面可视距离
weixin_46449470的博客
06-05 3939
如何实现鼠标的拖拽效果 1、选中要设置拖拽效果的元素 2、鼠标按下时（鼠标点击不放），获取事件对象的偏移量 3、移动时，获取事件对象的偏移量 4、设置拖拽限制 5、鼠标松开时（鼠标松开点击），取消移动效果 css和html代码： <style> #light{ width: 300px; height: 300px; background-color: red; position: absolute; to
vue 实现元素可拖曳
MunjungNa的博客
11-16 1710
转载的，蛮好用的，多谢原博主​​​​​​​Vue移动端实现元素拖拽 - Tove丶 - 博客园最近遇到一个需求，在App内嵌的H5页面上，有一个悬浮的客服图标，点击可跳转客服页面。最初这个客服图标采用的是固定定位的方式。现在新的需求是，可以拖拽该图标到屏幕任意位置，防止遮挡页面内容。 思考实现https://www.cnblogs.com/chen214/p/15078391.html 方法封装 /** * @name: draggable * @description: 元素拖拽 */ co.
js实现页面元素的拖拽
zongmaomx的博客
06-22 3059
平时在我们页面上，经常会悬浮着一些功能按钮，如帮助，联系客服等，按钮的显示比较简单，用定位悬浮在自己需要的位置上就行，比如下面的页面上我们展示一个帮助的按钮，用户点击后可以展示一些帮助的信息： 代码： 但是这样定位一般是固定在这个位置，如果这时候刚好【帮助按钮】挡住了这个位置原本有的其他操作按钮，那么我们就需要能够把【帮助按钮】拖开，不影响原本页面上的操作。一般实现拖动的思路是：在【帮助按钮】上鼠标按下时，记录下当前的坐标，以及原本相对于父元素的位置，然后监听【帮助按钮】的鼠标移动事件【onmousem
jQuery EasyUI window拖动超出浏览器边界问题修正
卡萨布兰卡的博客
07-27 4003
jQuery EasyUI window拖动超出浏览器边界问题修正 在ouMove中添加相应代码，当超出范围时窗口保持在浏览器边缘不再移动。 实际使用的时候，窗口可能会被拖拽到浏览器窗口以外的位置，文章在初始化window对窗口的位置进行限制，当拖拽窗口位置超出浏览器边缘时，窗口会停留在浏览器边缘位置禁止继续拖动，代码示例如下
鼠标拖拽窗口效果（不允许拖出屏幕的可视区域）
皮卡丘の开发之路
08-25 7031
鼠标拖拽窗口效果（不允许拖出屏幕的可视区域）
Javascript原生实现盒子/容器/div内(有边界)可拖拽可放大，不超出盒子/容器/div。
熬猪的夜的博客
09-09 1544
Javascript原生实现盒子/容器/div内(有边界)可拖拽可放大，不超出盒子/容器/div。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-
elementui中el-dialog拖动效果并且拖动位置不可超出可视区域
05-30
要在elementui中使用el-dialog拖动效果并且拖动位置不可超出可视区域，可以通过以下步骤实现： 1. 在el-dialog组件中添加一个v-dialog-drag指令，用于启用拖动功能。 2. 在v-dialog-drag指令中添加dragDialog方法，用于处理拖动过程中的相关逻辑。 3. 在dragDialog方法中，通过计算鼠标的偏移量和el-dialog的初始位置，计算出el-dialog的新位置，并将其限制在可视区域内。 下面是一个示例代码，可以参考实现： ```html <template> <el-dialog title="Dialog" :visible.sync="dialogVisible" :before-close="handleClose" v-dialog-drag > <p>Dialog Content</p> </el-dialog> </template> <script> export default { data() { return { dialogVisible: false, dialogLeft: 0, dialogTop: 0, mouseX: 0, mouseY: 0, dialogWidth: 0, dialogHeight: 0, windowWidth: 0, windowHeight: 0 }; }, directives: { "dialog-drag": { bind(el, binding, vnode) { const dialogHeaderEl = el.querySelector(".el-dialog__header"); const dragDom = el.querySelector(".el-dialog"); dialogHeaderEl.style.cursor = "move"; // 获取元素样式，兼容IE const getStyle = (function() { if (window.document.currentStyle) { return (dom, attr) => dom.currentStyle[attr]; } else { return (dom, attr) => getComputedStyle(dom, false)[attr]; } })(); dialogHeaderEl.onmousedown = e => { // 鼠标按下，计算当前元素距离可视区的距离 this.mouseX = e.clientX; this.mouseY = e.clientY; this.dialogLeft = parseInt(getStyle(dragDom, "left")); this.dialogTop = parseInt(getStyle(dragDom, "top")); // 获取当前元素的宽度和高度 this.dialogWidth = dragDom.offsetWidth; this.dialogHeight = dragDom.offsetHeight; // 获取可视区的宽度和高度 this.windowWidth = document.documentElement.clientWidth; this.windowHeight = document.documentElement.clientHeight; // 绑定拖动事件 document.onmousemove = this.dragDialog; document.onmouseup = this.mouseUp; }; } } }, methods: { dragDialog(e) { // 计算移动后的位置 let newLeft = e.clientX - this.mouseX + this.dialogLeft; let newTop = e.clientY - this.mouseY + this.dialogTop; // 限制移动范围 if (newLeft < 0) { newLeft = 0; } else if (newLeft > this.windowWidth - this.dialogWidth) { newLeft = this.windowWidth - this.dialogWidth; } if (newTop < 0) { newTop = 0; } else if (newTop > this.windowHeight - this.dialogHeight) { newTop = this.windowHeight - this.dialogHeight; } // 移动元素 const dragDom = document.querySelector(".el-dialog"); dragDom.style.left = newLeft + "px"; dragDom.style.top = newTop + "px"; }, mouseUp() { // 解绑拖动事件 document.onmousemove = null; document.onmouseup = null; } } }; </script> ``` 在上面的代码中，我们定义了一个自定义指令v-dialog-drag，并在el-dialog组件中使用它来启用拖动功能。在v-dialog-drag指令中，我们绑定了dialogHeaderEl元素的mousedown事件，并在事件处理程序中实现了拖动逻辑。我们使用getStyle方法获取元素的样式，然后计算出鼠标移动后的位置，并将其限制在可视区域内。最后，我们通过设置dragDom元素的left和top样式来实现元素的移动。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

风景再美，既已路过

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值