vue 用户拖拽窗口大小_vuejs中拖动改变元素宽度实现宽度自适应大小

最新推荐文章于 2024-08-21 09:32:51 发布
最新推荐文章于 2024-08-21 09:32:51 发布
阅读量581 收藏 1
点赞数
文章标签： vue 用户拖拽窗口大小
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_39534873/article/details/111970514
版权
本文介绍如何在 VueJS 中实现用户通过拖动分隔线来改变元素宽度的功能，确保元素宽度自适应。涉及到DOM操作，通过监听鼠标事件来计算并更新元素的left值，同时设置最小宽度限制，防止元素拖动消失。代码示例包括HTML结构、JS方法以及CSS样式。
摘要由CSDN通过智能技术生成

需求效果：

原理：拖动效果的实现基本都是dom操作来实现的，通过拖动分隔线，计算分隔线与浏览器边框的距离(left)，来实现拖动之后的不同宽度的计算；当拖动分隔线1时，计算元素框left和mid；当拖动分隔线2时，计算元素框mid和right；同时设置元素框最小值以防止元素框拖没了(其实是被遮住了)。使用SetCapture() 和 ReleaseCapture()的函数功能指定窗口里设置鼠标捕获。

在vuejs中使用，methods设置方法，mounted钩子挂载：

html部分代码：

  • 西瓜
  • 备注2
  • test
  • 芒果
  • 备注
  • test

js部分代码

mounted () {this.dragControllerDiv();

},

methods: {

dragControllerDiv:function() {var resize = document.getElementsByClassName('resize');var resize2 &#

最低0.47元/天 解锁文章
weixin_39534873
关注
Vuejs通过拖动改变元素宽度实现自适应
10-14
在Vue.js中，实现通过拖动来改变元素宽度并达到自适应的效果，主要涉及DOM操作、事件监听以及响应式更新。以下将详细讲解这个过程。 首先，我们需要在HTML模板中定义一个可拖动的布局。从给定的部分内容来看，布局...
vue-drag-resize-一个无依赖的Vue组件，用于具有高宽比，React性道具等的可拖动和可缩放的元素-Vue.js开发
05-27
Vue-drag-resize Vue组件，用于可拖动和可调整大小的元素。 目录功能部件安装和基本用法道具事件贡献许可权Vue拖动并调整大小Vue组件，用于可拖动和可调整大小的元素。 目录功能安装和基本用法道具事件提供许可证的演示演示功能轻巧，不依赖所有道具都是React性的支持触摸事件使用可拖动的，可调整大小的控件或同时使用两者定义用于调整大小的标尺将尺寸比例保存为可调整大小的组件限制大小和向父级移动元素限制拖动到垂直轴或水平轴安装和基本用法$ npm i -s vu
vue tooltip动态绑定提示信息_一个全新的Vue拖拽特性实现：“调整尺寸”部分
weixin_39596720的博客
12-12 477
关于拖拽CabloyJS提供了完备的拖拽特性，可以实现移动和调整尺寸两大类功能，这里对调整尺寸的开发进行阐述 关于移动的开发，请参见：拖拽：移动演示开发步骤下面以模块test-party为例，说明拖拽（调整尺寸）的开发步骤完整源码请参见文件src/module/test-party/front/src/kitchen-sink/pages/dragdrop/dragdropResize.vue，这...
Vue3引入vue-drag-resize拖拽库 实现对dom的拖拽和拉伸、渲染
weixin_46607967的博客
07-12 624
源码&文档示例示例。
Vue中使用vue-drag-resize实现窗体可拖拽和随意缩放大小
BADAO_LIUMANG_QIZHI的博客
08-24 2897
在上面的基础上，实现弹窗窗体可移动以及随意缩放大小。
vue的拖拽拉伸插件vue-drag-resize
weixin_42178050的博客
06-17 1033
https://zhuanlan.zhihu.com/p/164429781
【Vue】：利用 vue-drag-resize 拖拽缩放插件，实现对元素的拖拽以及拉伸操作，从而调整元素的宽度和高度
最新发布
Anislandwhale的博客
08-21 1307
“vue-drag-resize” 是一个用于 Vue.js 的插件，它允许你在 Vue 应用中轻松实现可拖拽和可调整大小的元素
vue中实现拖动调整左右两侧div的宽度的示例代码
01-19
还是老话，因为我不是专业的前端工程师，只是兼职写一些简单的前端，所以这个功能的实现得益于以下博客，《vue 拖动调整左右两侧div的宽度》、《vuejs中拖动改变元素宽度实现宽度自适应大小》，而我只是针对于他们...
vue终极解决多个页面Echart随页面窗口大小而改变图形大小方法
09-03
在开发基于Vue的Web应用程序时，常常需要使用ECharts库来创建交互式图表。ECharts是一种基于JavaScript的数据可视化库，...这样可以确保每个ECharts实例都能正确响应其容器元素的尺寸变化，从而实现理想的自适应效果。
vue拖拽缩放组件（vue-drag-resize）
热门推荐
qq_17627195的博客
10-12 1万+
vue-drag-resize是一个支持拖拽与缩放的vue插件，支持vue 1.x与2.x，使用方便，上手便利。 特征 1. 轻量级，无依赖性 2. 所有的操作都是可联动的 3. 支持触摸事件 4. 定义元素可拖拽，或者可缩放，或者二者兼有 5. 提供用于调整大小的操作点与操作框 6. 可以按照比例缩放或者不按照比例缩放元素 7. 可限制拖拽的最大与最小值、拖拽的范围是否超出其父元素 8. 可限制拖动的方向为垂直或水平轴 gitHib地址： ht
vue-drag-resize：用于调整大小和拖动元素的Vue组件
02-06
Vue拖动调整大小 Vue可拖动和可调整大小元素的组件。 目录 演示版 产品特点 轻巧，无依赖 所有道具都是React性的 支持触摸事件 使用可拖动，可调整大小或同时使用 定义棒以调整大小 为可调整大小的组件保存长宽比 限制尺寸和移动到父元素 限制拖动到垂直或水平轴 安装和基本用法 $ npm i -s vue-drag-resize 注册组件： import Vue from 'vue' import VueDragResize from 'vue-drag-resize' Vue . component ( 'vue-drag-resize' , VueDragResize ) 使
vue-drag-resize.zip
10-19
在使用Vue拖拽移动时，因为我使用的Vue cdn的方式，但网上都是npm的方式写的此功能，所以我使用Vue自定义指令，不是Vue npm的方式，实现在一定范围内拖拽，移动，缩放的功能,且修复拖拽时卡顿问题
vue-drag-resize-rotate:vueComponent拖动，调整大小和旋转
05-27
描述(Describe) 基于 vue2.6 的一个 dom 元素拖拽、缩放和旋转的组件; 支持基本的触点控制、宽高位置范围值、子父级嵌套、锁定定比例和层级等； 支持基本的事件回调，提供元素实时宽高位置信息数据； 目前仅支持 pc 端、px 的 css 单位；后续添加移动端和 rem 自适应； 组件仅实现最基本的拖拽、缩放和旋转核心功能，源码简单清晰可解耦，有较高的扩展性 演示(Demo) 版本(Version) 目前最新版本为 1.0.12 安装(Install) npm i @liaogn/vue-drag-resize-rotate -S // 或 cnpm i @liaogn/vue-drag-resize-rotate -S 引入(Import) 1、main.js 全局引入 import vueDragResizeRotate from '@liaogn/vue-drag-re
vue实现div可拖动位置也可改变盒子大小的原理
10-14
主要介绍了vue实现div可拖动位置也可改变盒子大小，本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
适用于vue的可拖动可调整大小和可旋转的组件
08-10
适用于vue的可拖动，可调整大小和可旋转的组件
vue-drag-resize 拖拽缩放插件
前端技术
03-04 5702
一、前言 项目需求，在网上找到一个好用的插件。 中文详解：链接 git：链接 二、效果 三、源码 <template> <div class="main"> <vue-drag-resize :w="vw" :h="vh" v-on:resizing="resize" > 　　<div class="box" :style="{ width: `${vw}px`, height: `${vh}px` }"&g
vue-drag-resize（可拖动/调整大小的元素的 Vue 第三方库）
Xiang_Gong_Ya_的博客
01-09 4423
/ 拖拽时可以确定元素位置。
vue-drag-resize 可拖拽的vue轻量级插件
阿坤的博客
08-18 4118
vue-drag-resize 可拖拽的vue轻量级插件插件地址使用方式属性isActive 是否激活状态isDraggable 是否允许拖拽isResizable 是否允许缩放aspectRatio 是否等比例缩放w 组件宽度h 组件高度minw 最小宽度minh 最小高度x 定位lefty 定位topz 层级sticks 元素缩放的节点定义preventActiveBehavior 单击组件外区域来禁止组件行为parentLimitation 是否超出父级元素parentW 父级宽度parentH 父级
vue3拖动改变元素宽度实现宽度自适应
07-17
在Vue 3中实现拖动改变元素宽度并实现宽度自适应的方法如下： 1. 首先，创建一个可拖动的元素，可以使用HTML的`<div>`标签，并给它一个固定的宽度。 2. 在Vue组件中，使用`@mousedown`事件监听鼠标按下的动作，并绑定一个方法来处理拖动事件。 3. 在这个方法中，使用`@mousemove`和`@mouseup`事件来监听鼠标移动和释放的动作，并绑定对应的方法来处理。 4. 在鼠标按下时，记录下鼠标的初始位置和元素的初始宽度。 5. 在鼠标移动时，计算鼠标移动的距离，并根据这个距离计算出新的元素宽度。 6. 更新元素的宽度，可以使用Vue的响应式数据或者直接操作DOM元素。 下面是一个示例代码： ```html <template> <div class="draggable" :style="{ width: width + 'px' }" @mousedown="startDragging"> <!-- 内容 --> </div> </template> <script> export default { data() { return { startX: 0, startWidth: 0, width: 200, // 初始宽度 }; }, methods: { startDragging(event) { this.startX = event.clientX; this.startWidth = this.width; document.addEventListener('mousemove', this.drag); document.addEventListener('mouseup', this.stopDragging); }, drag(event) { const dx = event.clientX - this.startX; this.width = this.startWidth + dx; }, stopDragging() { document.removeEventListener('mousemove', this.drag); document.removeEventListener('mouseup', this.stopDragging); }, }, }; </script> <style scoped> .draggable { border: 1px solid #ccc; cursor: col-resize; } </style> ``` 这样，当你拖动可拖动元素时，它的宽度会随着鼠标的移动而改变，并实现宽度自适应效果。注意，在实际项目中，你可能需要根据需求对代码进行适当的修改和扩展。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值