当前位置: 首页 > news >正文

vue draggable组件,拖拽元素时,获取元素上在data或setup中定义的数据

比如我需要在拖拽开始的函数中获取当前拖拽元素的数据,主要是通过给该元素加入自定义属性获取。

假如你需要获取循环列表中一个属性id,那么就自定义一个属性myid绑定到元素上。

当然:如果你想传入多个的话可以用字符串拼接到一起,最终根据需要的值进行处理。

eg:     :myid="item.id+','+item.schoolId"      通过这样子绑定多个值到一个属性上,方便使用。

下面代码是我只需要一个属性,所以就只绑定一个。

 <VueDraggablev-model="List"@start="onDragStart(list,$event)":animation="150"group="people">
<divv-for="(item, index) in List"@click.prevent="subClick(item, index)"@mousemove="handleMouseMove(item, index)":key="item.id":myid="item.id">一些要拖拽的模块内容
</div>
</VueDraggable>

通过e.item.attributes.myid.value这样子获取。注:e是event事件对象。

const onDragStart = (list,e) => {delEleIndex.value=e.oldIndex;curList.value=list;draggedElement.value = e.item.attributes.myid.value;console.log("===当前拖元素的id==",draggedElement.value);
};

相关文章:

  • 北京网站建设多少钱?
  • 辽宁网页制作哪家好_网站建设
  • 高端品牌网站建设_汉中网站制作
  • 【matlab】随机森林客户流失预测
  • Java之网络面试经典题(一)
  • hcip暑假第二次作业
  • Elasticsearch 更新指定字段
  • C++类和对象(一)
  • C++ 定时器触发
  • 苹果电脑可以玩魔兽世界吗 魔兽世界有mac版本么 macbook 可以玩魔兽世界吗
  • Codeforces Round 957 (Div. 3)(A~E题解)
  • Flutter【组件】标签
  • 【数据结构】初探数据结构面纱:栈和队列全面剖析
  • uniapp中使用uni-ui组件库
  • NLP任务中三个概念标记、样本映射和偏移映射三个概念的浅析
  • 【MIT 6.5840/6.824】Lab1 MapReduce
  • 【记录】CSS|Tailwind 的主题定义的颜色的使用方法(--color啥的)
  • 昇思25天学习打卡营第17天|应用实践之SSD目标检测
  • 【许晓笛】 EOS 智能合约案例解析(3)
  • go append函数以及写入
  • iOS小技巧之UIImagePickerController实现头像选择
  • leetcode388. Longest Absolute File Path
  • redis学习笔记(三):列表、集合、有序集合
  • vue总结
  • 爱情 北京女病人
  • 函数式编程与面向对象编程[4]:Scala的类型关联Type Alias
  • 面试遇到的一些题
  • 使用SAX解析XML
  • 提升用户体验的利器——使用Vue-Occupy实现占位效果
  • 推荐一个React的管理后台框架
  • 小程序开发之路(一)
  • 用 Swift 编写面向协议的视图
  • 做一名精致的JavaScripter 01:JavaScript简介
  • FaaS 的简单实践
  • SAP CRM里Lead通过工作流自动创建Opportunity的原理讲解 ...
  • # C++之functional库用法整理
  • # 数据结构
  • #java学习笔记(面向对象)----(未完结)
  • #我与虚拟机的故事#连载20:周志明虚拟机第 3 版:到底值不值得买?
  • (NO.00004)iOS实现打砖块游戏(十二):伸缩自如,我是如意金箍棒(上)!
  • (二)什么是Vite——Vite 和 Webpack 区别(冷启动)
  • (附源码)spring boot车辆管理系统 毕业设计 031034
  • (附源码)spring boot智能服药提醒app 毕业设计 102151
  • (十)c52学习之旅-定时器实验
  • (十五)devops持续集成开发——jenkins流水线构建策略配置及触发器的使用
  • (算法设计与分析)第一章算法概述-习题
  • (完整代码)R语言中利用SVM-RFE机器学习算法筛选关键因子
  • (一)eclipse Dynamic web project 工程目录以及文件路径问题
  • ./mysql.server: 没有那个文件或目录_Linux下安装MySQL出现“ls: /var/lib/mysql/*.pid: 没有那个文件或目录”...
  • .htaccess配置重写url引擎
  • .NET 8.0 发布到 IIS
  • .NET文档生成工具ADB使用图文教程
  • /proc/stat文件详解(翻译)
  • :中兴通讯为何成功
  • [ web基础篇 ] Burp Suite 爆破 Basic 认证密码
  • [ 云计算 | AWS ] 对比分析:Amazon SNS 与 SQS 消息服务的异同与选择
  • [AI]文心一言出圈的同时,NLP处理下的ChatGPT-4.5最新资讯
  • [Algorithm][动态规划][两个数组的DP][正则表达式匹配][交错字符串][两个字符串的最小ASCII删除和][最长重复子数组]详细讲解