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

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

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

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

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

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

 <VueDraggable
    v-model="List"
    @start="onDragStart(list,$event)"
    :animation="150"
    group="people"
               
 >
<div
        v-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);
};

最近更新

  1. docker php8.1+nginx base 镜像 dockerfile 配置

    2024-07-12 12:40:01       67 阅读
  2. Could not load dynamic library ‘cudart64_100.dll‘

    2024-07-12 12:40:01       71 阅读
  3. 在Django里面运行非项目文件

    2024-07-12 12:40:01       58 阅读
  4. Python语言-面向对象

    2024-07-12 12:40:01       69 阅读

热门阅读

  1. 网络编程:数据包的封装----libnet库

    2024-07-12 12:40:01       27 阅读
  2. 使用定时器消除抖动

    2024-07-12 12:40:01       21 阅读
  3. Spring框架(三)——AOP--实现方式

    2024-07-12 12:40:01       19 阅读
  4. vue-grid-layout详解

    2024-07-12 12:40:01       23 阅读
  5. linux,docker,k8s常见命令

    2024-07-12 12:40:01       21 阅读
  6. TensorFlow 和 PyTorch 显示模型参数方法详解

    2024-07-12 12:40:01       20 阅读
  7. 【go学习合集】进阶数据类型2 -------->切片

    2024-07-12 12:40:01       20 阅读
  8. 扩展欧几里得c++

    2024-07-12 12:40:01       24 阅读
  9. elementui的table的@selection-change阻止事件改变

    2024-07-12 12:40:01       22 阅读
  10. 介绍5款.NET开源、功能强大的Windows桌面工具箱

    2024-07-12 12:40:01       17 阅读
  11. tp计算距离,筛选0-10km距离内商家

    2024-07-12 12:40:01       24 阅读
  12. n3.平滑升级和回滚

    2024-07-12 12:40:01       16 阅读