vue3实现vuedraggable实现拖拽到垃圾桶图标位置进行删除

当使用Vue 3和vuedraggable库时,你可以按照以下方式实现拖拽到垃圾桶图标位置进行删除的功能:

首先,确保你已经安装了vuedraggable库。如果没有安装,可以通过以下命令进行安装:

vuedraggable  和vue-draggable-plus使用非常类似,你可以自己选择安装哪种。

vue-draggable-plus中文文档参考:

https://vue-draggable-plus.pages.dev/guide/

1、安装:

npm install vue-draggable-plus

2、引入

import { VueDraggable } from "vue-draggable-plus";

3、使用

在这个示例中:

  1. 使用了Vue 3的ref来创建items的响应式数据。
  2. 使用setup函数来设置itemsonDragEnddeleteItem等函数。
  3. 使用draggable组件来实现拖拽功能,绑定了items数据。
  4. 在拖拽结束时,会触发onDragEnd函数,你可以在这里处理拖拽结束的逻辑。
  5. 垃圾桶图标位置的<div>元素设置了@dragover.prevent@drop="deleteItem"事件,当拖拽到该位置时,会触发deleteItem函数来删除对应的项。
  6. deleteItem函数中,根据拖拽的数据项的id来过滤掉对应的项,实现删除功能。
<template><div><draggable v-model="items" @end="onDragEnd"><div v-for="item in items" :key="item.id" class="draggable-item">{{ item.text }}</div></draggable><div class="trash-can" @dragover.prevent @drop="deleteItem">🗑️ Drag Here to Delete</div></div>
</template><script>
import { ref } from 'vue';
import draggable from 'vuedraggable';export default {components: {draggable},setup() {const items = ref([{ id: 1, text: 'Item 1' },{ id: 2, text: 'Item 2' },{ id: 3, text: 'Item 3' },{ id: 4, text: 'Item 4' }]);const onDragEnd = (event) => {// 拖拽结束时的逻辑};const deleteItem = (event) => {const itemId = event.dataTransfer.getData('text/plain');items.value = items.value.filter(item => item.id.toString() !== itemId);};return {items,onDragEnd,deleteItem};}
};
</script><style>
.trash-can {border: 2px dashed #ccc;padding: 20px;margin-top: 20px;text-align: center;cursor: pointer;
}
</style>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/870629.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

力扣636.函数的独占时间

力扣636.函数的独占时间 用一个对组栈存每个start数据&#xff0c;first为编号&#xff0c;second为开始时间 start时&#xff1a;若栈为空 直接入栈 若不为空 处理前一段已独占的时间 end时&#xff1a;将自己的独占时间处理了 若栈非空 将栈顶元素的开始时间更新为当前时间1因…

如何将HEVC格式的视频转换为无损、未压缩的MP4格式视频?

在和大家分享视频格式转换之前&#xff0c;先跟大家分享一下HEVC格式的视频到底是什么文件&#xff1f;压缩原理是什么&#xff1f;了解了它的本质之后&#xff0c;我们就可以知道如何保证视频高清无损了。 如何将HEVC格式的视频转换为无损、未压缩的MP4格式视频&#xff1f; …

【Flask从入门到精通:第二课:flask加载项目配置的二种方式、路由的基本定义和终端运行】

flask加载项目配置的二种方式 # 1. 导入flask核心类 from flask import Flask# 2. 初始化web应用程序的实例对象 app Flask(__name__)"""第一种&#xff1a;flask项目加载站点配置的方式""" # app.config["配置项"] 配置项值 # app…

逐步实践复现 SELF-RAG

SELF-RAG 简介 SELF-RAG&#xff08;Self-Reflective Retrieval-Augmented Generation&#xff09;是一种检索增强生成&#xff08;RAG&#xff09;的框架&#xff0c;它通过自我反思学习检索、生成和批判&#xff0c;以提高大型语言模型&#xff08;LLM&#xff09;的质量和真…

通用业务指标管理系统设计

设计一个通用业务指标管理系统&#xff0c;旨在帮助企业全面监控和管理关键业绩指标(KPIs)&#xff0c;以驱动决策制定和业务优化。以下是一个综合性的设计方案&#xff0c;涵盖核心功能模块、技术架构、以及用户体验设计要点&#xff1a; 1. 核心功能模块 目标设定与分解 战…

「C++系列」一篇文章说透【存储类】

文章目录 一、C 存储类1. 类的定义2. 对象的创建3. 对象在内存中的布局4. 对象的存储位置 二、auto 存储类1. auto的基本用法2. auto与存储类的关系1) 自动存储类&#xff08;最常见的&#xff09;2) 静态存储类3) 动态存储类&#xff08;通过new&#xff09; 三、register 存储…

C标准库读写文件

函数介绍 库变量 变量描述size_t无符号整数类型&#xff0c;是sizeof关键字的结果&#xff0c;表示对象大小FILE文件流类型&#xff0c;适合存储文件流信息的对象类型 库宏 宏描述NULL空指针常量EOF表示已经到达文件结束的负整数stderr、stdin、stdout指向FILE类型的指针&a…

react 中useState 使用Immer 简化数据更改操作数组、对象

如果你不想改变你的状态结构&#xff0c;你可能更喜欢嵌套传播的捷径。Immer 是一个流行的库&#xff0c;它允许你使用方便但可变的语法进行编写&#xff0c;并负责为你生成副本。使用 Immer&#xff0c;你编写的代码看起来就像你是 “打破规则” 并且正在改变一个对象&#xf…

js【详解】声明常量和变量 const let var

声明常量 const 声明常量时&#xff0c;必须赋值&#xff01;声明的常量赋值后&#xff0c;不能修改&#xff08;运行时会报错&#xff09;ES6 新增语法有块级作用域 const webName EC编程俱乐部常量不可变的本质 常量赋值值类型数据后&#xff0c;不能再赋其他值&#xff0…

【数智化案例展】吉林省消防救援总队——基于大语言模型的119智慧助手

‍ 嘉诚信息案例 本项目案例由嘉诚信息投递并参与数据猿与上海大数据联盟联合推出的《2024中国数智化转型升级创新服务企业》榜单/奖项评选。 大数据产业创新服务媒体 ——聚焦数据 改变商业 随着信息时代的迅猛发展&#xff0c;消防人员正面临前所未有的知识爆炸挑战。为了高…

功能丰富的开源协作式知识库系统outline

语雀飞书平替快速协作式的团队知识库提供一个美观、易于使用的界面允许团队成员以实时方式协作编辑文档支持Markdown-i68爱六八,链接你我他&#xff1a;https://i68.ltd项目仓库&#xff1a;GitHub - outline/outline: The fastest knowledge base for growing teams. Beautifu…

day30--56. 合并区间+ 738.单调递增的数字

一、56. 合并区间 题目链接&#xff1a;https://leetcode.cn/problems/merge-intervals/ 文章讲解&#xff1a;https://programmercarl.com/0056.%E5%90%88%E5%B9%B6%E5%8C%BA%E9%97%B4.html 视频讲解&#xff1a;https://www.bilibili.com/video/BV1wx4y157nD 1.1 初见思路 …

数据库第四次练习

数据准备 创建两张表&#xff1a;部门&#xff08;dept&#xff09;和员工&#xff08;emp&#xff09;&#xff0c;并插入数据&#xff0c;代码如下 create table dept( dept_id int primary key auto_increment comment 部门编号, dept_name char(20) comment 部门名称 ); in…

SAP PS学习笔记02 - 网络,活动,PS文本,PS文书(凭证),里程碑

上一章讲了PS 的概要&#xff0c;以及创建Project&#xff0c;创建WBS。 SAP PS学习笔记01 - PS概述&#xff0c;创建Project和WBS-CSDN博客 本章继续讲PS的后续内容。包括下面的概念和基本操作&#xff0c;以及一些Customize&#xff1a; - 网络&#xff08;Network&#xf…

力扣-回溯法

何为回溯法&#xff1f; 在搜索到某一节点的时候&#xff0c;如果我们发现目前的节点&#xff08;及其子节点&#xff09;并不是需求目标时&#xff0c;我们回退到原来的节点继续搜索&#xff0c;并且把在目前节点修改的状态还原。 记住两个小诀窍&#xff0c;一是按引用传状态…

copy 和 mutableCopy 有点乱

对 string literal (字符串字面量) 执行 copy 要打印指针指向对象的地址和指针本身的地址&#xff0c;可以使用 %p 格式符来输出指针地址。以下代码&#xff0c;展示了 originalString 和 copiedString 的指针地址和指向对象的地址&#xff1a; NSString *originalString &q…

使用 FFmpeg 处理视频:简介、常用命令及在 C++ 中调用 FFmpeg

文章目录 使用 FFmpeg 处理视频&#xff1a;简介、常用命令及在 C 中调用 FFmpeg一、FFmpeg 简介1. 什么是 FFmpeg&#xff1f;2. 主要特性3. 官方网站和文档 二、FFmpeg 常用命令1. 视频转码2. 提取音频3. 剪切视频4. 合并视频5. 调整分辨率6. 视频截图7. 推流8. 拉流 三、在 …

【Go系列】 array、slice 和 map

承上启下 我们上一篇文章中介绍了if和for&#xff0c;这不得练习下&#xff0c;让我们一起来实践一下如何使用 continue 语句来计算100以内的偶数之和。在我们编写代码的过程中&#xff0c;continue 语句将会帮助我们跳过某些不需要的迭代&#xff0c;比如在这个例子中&#xf…

欣奇随机美图源码

欣赏养眼美图让人心情愉悦 新增正能量进站引导首页 上传文件解压即可用有手就行 美图输出接口自判断版 http://mt.xqia.net/api.php http://mt.xqia.net/api.php?typejson 源码下载&#xff1a;https://download.csdn.net/download/m0_66047725/89520368 更多资源下载&…

20240711每日消息队列-------------MQ消息的积压的折磨

目标 解决MQ消息的积压 背景 菜馆系统----------- 系统读取消息&#xff0c;处理业务逻辑&#xff0c;持久化订单和菜品数据&#xff0c;然后将其显示在菜品管理客户端上。 最初我们的用户基数很小&#xff0c;上线后的一段时间内&#xff0c;MQ消息通信还算顺利。 随着用户…