vue-grid-layout 拖拽子元素禁止触发栅格元素拖拽事件

最新推荐文章于 2023-09-18 16:28:54 发布
最新推荐文章于 2023-09-18 16:28:54 发布
阅读量807 收藏 1
点赞数 1
分类专栏： vue-grid-layout 拖拽 文章标签： 前端 html vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_41248240/article/details/126118887
版权

做的一个功能是在拖拽的栅格元素中加入了滑块功能，拖拽滑块的时候栅格元素也在跟着拖拽。
怎么达到拖拽滑块，栅格元素保持不动呢？
看官网文档说有一个 dragIgnoreFrom 属性，下图为该属性介绍
在这里插入图片描述
就是通过该属性来控制拖拽子元素时不触发栅格元素，使用方法如下：

// .sliderBox就是需要拖拽的子元素，放入grid-item中
dragIgnoreFrom=".sliderBox"
nathan娄
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue-grid-layout：Vue.js的可拖动和可调整大小的网格布局
02-06
Vue网格布局 什么是Vue网格布局？ vue-grid-layout是的网格布局系统，例如 。 受极大启发 产品特点 可拖动的小部件 可调整大小的小部件 静态小部件 边界检查以进行拖动和调整大小 可以在不重建网格的情况下添加或删除小部件 布局可以序列化和还原 自动RTL支持（调整大小无法在2.2.0上使用RTL） React灵敏 当前版本： 2.3.12（支持Vue 2.2+） 对于IE11等旧版浏览器，请使用版本 对于Vue 2.1.10及以下版本，请使用版 对于Vue 1，请使用版 文献资料 查看 使用vue-grid-layout的项目 认识别人吗？ 建立公关让我知道！ 有助于 如
拖拽宫格vue-grid-layout详细应用及案例
鹏多多的博客
08-07 3346
vue-grid-layout是一个适用于vue的拖拽栅格布局库，功能齐全，适用于拖拽+高度/宽度自由调节的布局需求，本文将讲述一些常用参数和事件，以及做一个同步拖拽的Demo。
HTML5拖拽详解及vue-grid-layout插件使用
sunmagine的博客
04-12 3474
拖拽API ondragstart 在拖动操作开始时执行脚本（开始拖动） 被拖拽元素 ondrag 只要对象在被拖动就执行脚本（正在拖动） 被拖拽元素 ondragend 在拖动操作结束时执行脚本（拖动结束） 被拖拽元素 ondragenter 在被拖放元素进入放置目标时触发（进入） 目标元素 ondragover 只要对象正...
Vue-grid-layout实现web拖拽布局功能
weixin_45265583的博客
04-26 5815
vue-grid-layout是一个vue栅格拖动布局的组件.官网 特点： 元素可拖动 元素可调整大小 边界检查拖动和调整大小 可以添加或删除窗口小部件而无需重建网格 布局可以序列化 标识栅格元素是否可拖拽该属性只能将元素向下排，并不能形成左右替换的形式 属性 GridLayout常用参数: 参数 含义 数据类型 colNum 将一行分为多少块 数字 默认 12 rowHeight 行高 ...
Vue 弹出层时 禁止页面滑动
cdx1170776994的博客
12-11 2万+
上代码 /***滑动限制***/ stop(){ var mo=function(e){e.preventDefault();}; document.body.style.overflow='hidden'; document.addEventListener("touchmove",mo,false);//禁止页面滑动 },
vuedraggable怎么设置把两个区块直接禁止拖拽？
Haines
01-19 1955
答案：设置group属性不同的值，即可。 代码参考： <template> <div> <!--使用draggable组件--> <div class="itxst"> <span>A、B列可以相互拖动，无法拖到C列</span> <div class="col"> <div class="title" >A列</div> <draggable v-model="arr1"
vue项目中vue-grid-layout使用简介
qq_26887683的博客
02-03 2198
vue项目中vue-grid-layout使用简介
解决Selenium元素拖拽不生效Bug
主要分享测试的学习资源，帮助快速了解测试行业，帮助想转行、进阶、小白成长为高级测试工程师。
03-13 1426
如果你是使用Python+Selenium技术栈实现的Web UI自动化，可以直接下载seletools（Selenium Tools，作者：Dmitrii Bormotov）包，并将它导入到需要执行拖放的地方，然后简单地调用它的drag_and_drop()方法即可。方案3：先通过clickAndHold()方法点击并按住元素，然后使用moveByOffset()方法将元素拖拽到目标区域，再使用release()方法将按住的元素释放——无效。方案5：借助Robot类实现拖拽——无效。
vue-grid-layout 的使用
HYeeee的博客
01-04 1万+
vue-grid-layout中文文档 我需要用到这里面的可拖拽的效果。 碰到的问题 在安装完这个插件之后，在IE上无法打开，并报错缺少：，最终是下面这篇文章解决问题 Vue项目下IE报错 SCRIPT1003: 缺少 ‘:’，导致页面空白的解决方案 主要原因就是第三方库的兼容性问题，把vue-grid-layout引入到vue.config.js文件下的transpileDependencies集合中: module.exports = { ... transpileDependencies: [
vuedraggable互相拖动： 禁止拖动元素，和禁止拖动到的区域，以及禁止拖动整体。
weixin_459417989的博客
12-26 1万+
vuedraggable互相拖动禁止拖动、区域、位置、元素
Vue-grid-layout官方文档
03-11
1.详细介绍了Vue-Gird-layout的使用及API
使用Vue-Grid-Layout实现自定义工作台
02-01
使用Vue-Grid-Layout实现自定义工作台
vue-responsive-grid-layout:Vue Repsonsive网格布局
05-17
VueResponsiveGridLayout 1.2.0 VueJS的响应式可拖动和可调整大小的网格布局。... import {VueResponsiveGridLayout, VueGridItem, VueGridLayout } from 'vue-responsive-grid-layout' Vue.component
v-grid-layout：网格布局
02-15
v-grid-layout是Vue的网格布局系统，例如 。 这是的裸分支，它支持将GridItem嵌套在任何其他组件中 [| | ] 特征 可拖动的小部件 可调整大小的小部件 静态小部件 边界检查以进行拖动和调整大小 可以在不重建网格的...
【Vue 项目】使用 vuedraggable 实现拖拽效果时遇到的问题及解决方案总结（允许 el-table 行拖拽、部分元素不允许拖拽、拖拽避免影响文字复制和输入框输入文字）
一个努力学习的程序猿
04-11 2万+
在最近的开发过程中，遇到了关于拖拽排序的功能需求。在这里向大家推荐使用 vuedraggable。
拖拽元素内部有富文本时，富文本无法通过鼠标拖拽选中文字
笔记本
06-17 1410
问题描述 正常情况下，对于文本框中的文字，可以通过鼠标拖拽选中 但是，当外层是可拖拽移动时，就会无法选中文字了： （项目中拖拽组件用的是 vue-grid-layout，富文本用的是 tinymce） 思路 点击富文本后就进入了编辑文字的模式，此时要禁用外层的拖拽事件 方案一：用 focus 和 blur （不可行） 在富文本的 focus 事件回调中，禁用外层拖拽； 在 blur 的事件回调中，启用外层拖拽 但实测发现，这种方案不可行。因为无论是点击 editor，还是拖拽 editor，都会触发
Vue Grid Layout -️ 适用Vue.js的栅格布局系统，在vue3+上使用
wang13679201813的博客
09-18 2935
官网地址：https://madewithvuejs.com/vue-grid-layout中文文档：https://github.com/jbaysolutions/vue-grid-layout/blob/master/README-zh_CN.md可拖拽可调整大小静态部件（不可拖拽、调整大小）拖拽和调整大小时进行边界检查增减部件时避免重建栅格可序列化和还原的布局自动化RTL支持响应式。
vue3+ts+vue-grid-layout 实现组件拖拽效果以及解决Vue3使用 vue-grid-layout的问题
weixin_60886885的博客
04-12 3478
【代码】vue3+ts+vue-grid-layout 实现组件拖拽效果。
Vue Grid Layout -️ 适用Vue.js的栅格布局系统（保姆级使用教程）
热门推荐
~朴：shu的博客
11-22 3万+
在具有拖拽组成页面、组件动态调整大小、边缘碰撞监测的系统中，使用该布局无疑是最合适的。该栅格系统目前对 vue2 的支持是最好的，vue3 是需要用插件支持的，会在小节详细讲解。栅格布局难度不大，但是要理解里面的原理，并实际应用到自己的项目开发，还要结合自己项目的实际情况。
vue-grid-layout 拖拽echarts
最新发布
02-06
vue-grid-layout 是一个基于 Vue.js 的可拖拽网格布局组件，它可以帮助我们实现灵活的拖拽和调整大小的布局。而 echarts 是一个基于 JavaScript 的数据可视化库，它提供了丰富的图表类型和交互功能。 要在 vue-grid-layout 中拖拽 echarts，你可以按照以下步骤进行操作： 1. 首先，安装 vue-grid-layout 和 echarts 的依赖： ``` npm install vue-grid-layout echarts ``` 2. 在 Vue 组件中引入 vue-grid-layout 和 echarts： ```javascript import VueGridLayout from 'vue-grid-layout'; import echarts from 'echarts'; ``` 3. 在模板中使用 vue-grid-layout 的 GridLayout 组件，并设置布局参数： ```html <template> <vue-grid-layout :layout="layout" :col-num="12" :row-height="30"> <!-- 在这里放置 echarts 图表 --> </vue-grid-layout> </template> ``` 4. 在 Vue 组件的 `mounted` 钩子函数中初始化 echarts 图表，并将其添加到对应的网格布局中： ```javascript mounted() { const chart = echarts.init(this.$el.querySelector('.chart-container')); // 在这里配置和绘制 echarts 图表 // 将图表添加到对应的网格布局中 this.layout.forEach(item => { if (item.i === 'chart') { item.chart = chart; } }); } ``` 5. 在 Vue 组件的 `updated` 钩子函数中更新 echarts 图表的大小和位置： ```javascript updated() { this.layout.forEach(item => { if (item.i === 'chart' && item.chart) { item.chart.resize(); } }); } ``` 这样，你就可以在 vue-grid-layout 中拖拽 echarts 图表了。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值