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

vue3中使用vuedraggable实现拖拽

包安装方式

yarn add vuedraggable@next
npm i -S vuedraggable@next

属性说明

如果下面的属性说明未能完全看明,可以看左边的对应的菜单查看详细说明和例子。
在这里插入图片描述

完整例子

<template><div class="itxst"><div><draggable:list="state.list"ghost-class="ghost"chosen-class="chosenClass"animation="300"@start="onStart"@end="onEnd"><template #item="{ element }"><div class="item">{{ element.name }}</div></template></draggable></div><div>{{ state.list }}</div></div>
</template>
<script setup>
import { ref, reactive } from "vue";
import draggable from "vuedraggable";
/*
draggable 对CSS样式没有什么要求万物皆可拖拽
:list="state.list"         //需要绑定的数组
ghost-class="ghost"        //被替换元素的样式
chosen-class="chosenClass" //选中元素的样式
animation="300"            //动画效果
@start="onStart"           //拖拽开始的事件
@end="onEnd"               //拖拽结束的事件
*/
const state = reactive({//需要拖拽的数据,拖拽后数据的顺序也会变化list: [{ name: "www.itxst.com", id: 0 },{ name: "www.baidu.com", id: 1 },{ name: "www.google.com", id: 2 },],
});//拖拽开始的事件
const onStart = () => {console.log("开始拖拽");
};//拖拽结束的事件
const onEnd = () => {console.log("结束拖拽");
};
</script>
<style scoped>
.itxst {width: 600px;display: flex;
}
.itxst > div:nth-of-type(1) {flex: 1;
}
.itxst > div:nth-of-type(2) {width: 270px;padding-left: 20px;
}
.item {border: solid 1px #eee;padding: 6px 10px;text-align: left;
}.item:hover {cursor: move;
}
.item + .item {margin-top: 10px;
}
.ghost {border: solid 1px rgb(19, 41, 239);
}
.chosenClass {background-color: #f1f1f1;
}
</style>

如果报 missing required prop: “itemKey”

在这里插入图片描述

draggable加上属性

 item-key="id"

在这里插入图片描述

文档:vue.draggable.next 中文文档
参考文档:vue3中使用vuedraggable

http://www.lryc.cn/news/509909.html

相关文章:

  • leetcode 7. 整数反转
  • Nginx单向链表 ngx_list_t
  • go语言中的字符串详解
  • Windows脚本清理C盘缓存
  • 分布式协同 - 分布式事务_2PC 3PC解决方案
  • 永磁同步电机负载估计算法--自适应扩张状态观测器
  • 【HarmonyOS应用开发——ArkTS语言】购物商城的实现【合集】
  • Python二维码生成器qrcode库
  • Python:模拟(包含例题:饮料换购 图像模糊 螺旋矩阵)
  • git分支与部署环境的关系以及开发规范
  • 2024最新鸿蒙开发面试题合集(一)-HarmonyOS NEXT Release(API 12 Release)
  • 【mybatis】详解 # 和 $ 的区别,两者分别适用于哪种场景,使用 $ 不当会造成什么影响
  • Java面试题,数据结构,图的最短路径算法应用于社交网络分析
  • Tree数据处理
  • idea配置gitee仓库
  • SpringBoot 事务
  • 我的JAVA-Web基础(1)
  • 【Leetcode 热题 100】207. 课程表
  • 从CreateDialogIndirectParam起---我与大模型对话
  • 重温设计模式--建造者模式
  • CSS(五):定位
  • JSON 系列之2:JSON简单查询
  • SQL 简单查询
  • YOLOv9-0.1部分代码阅读笔记-metrics.py
  • KaiOS 4.0 | DataCall and setupData implemention
  • nginx-rtmp服务器搭建
  • [c++进阶(三)]单例模式及特殊类的设计
  • 企业内训|高智能数据构建和多模态数据处理、Agent研发及AI测评技术内训-吉林省某汽车厂商
  • 009 Qt_显示类控件_QLCDNumber、ProgressBar、Calendar
  • --spring.profiles.active=prod