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

vuedraggable

官方文档:https://www.npmjs.com/package/vuedraggable

中文文档:http://www.itxst.com/vue-draggable/tutorial.html

案例下载地址:

https://github.com/SortableJS/Vue.Draggable.git

vuedraggableicon-default.png?t=O83Ahttps://sortablejs.github.io/Vue.Draggable/#/functional

安装:

npm install vuedraggable

yarn add vuedraggable

<!-- 两个表拖拽 -->
<template><div>表1</div><draggable:list="list1"item-key="id"tag="div":group="{ name: 'content', pull: 'clone', put: false }"animation="300"><template #item="{ element }"><div class="cursor-pointer" :id="element.id">{{ element.name }}</div></template></draggable><div>input增加</div><div class="row items-center"><input type="text" v-model="listInput" /><div @click="onAdd()">增加</div></div><div>表2</div><draggable:list="list2"item-key="id"tag="div"group="content"animation="300"@change="renewPreview"><template #item="{ element }"><div><div class="relative-position">{{ element.name }}</div><div @click="onDelete(element)">删除</div></div></template></draggable><div v-model="preview"></div>
</template><script setup>
import { onMounted, ref, watch } from 'vue';
import { $useApi } from 'boot/index';
import { v4 as uuidv4 } from 'uuid';
import draggable from 'vuedraggable';const list1 = ref([]);const list2 = ref([]);const listInput = ref(null);const searchList = ref(null);const preview = ref(null);// 删除
const onDelete = (str) => {list2.value = list2.value.filter((t) => t.id != str.id);renewPreview();
};// 增加input内容
const onAdd = () => {list2.value.push({id: 'aaa-' + uuidv4(),name: listInput.value,});renewPreview();listInput.value = '';
};// 更新内容
const renewPreview = () => {let pContent = '';list2.value.forEach((t) => {if (t.id.indexOf('aaa') !== -1) {pContent += t.name;} else {pContent += 'XXX';}});preview.value = pContent;
};// 搜索
watch(() => searchList.value,(newValue) => {getListInfo(newValue);}
);onMounted(() => {getInfo();getListInfo();
});// 获取元数据项信息
const getListInfo = async (str) => {const { data } = await $useApi.get('/xxx', {params: {name: str,},});list1.value = uniqueItems(data);
};// 数据去重
const uniqueItems = (data) => {// 合并重复name数据let arr = [];data.forEach((x) => {let map = arr.find((y) => y.name === x.name);if (map) {map.ids.push(x.id);} else {x.ids = [x.id];arr.push(x);}});return arr;
};// 基本信息
const getInfo = async () => {const { data } = await $useApi.get('/xxx');if (data) {list2.value = data?.nameMap ?? [];}
};
</script>
属性:  group: { name: "...", pull: [true, false, clone], tag: 'td' // 默认div,设置draggable标签解析html标签v-model:data // 绑定数据列表put: [true, false, array] } //name相同的组可以互相拖动, pull可以写条件判断,是否允许拖走,put可以写条件判断,是否允许拖入sort: true,  // 内部拖动排序列表delay: 0, // 以毫秒为单位定义排序何时开始。touchStartThreshold: 0, // px,在取消延迟拖动事件之前,点应该移动多少像素?disabled: false, // 如果设置为真,则禁用sortable。animation: 150,  // ms, 动画速度运动项目排序时,' 0 ' -没有动画。handle: ".my-handle",  // 在列表项中拖动句柄选择器,设置某些地方拖动才有效。filter: ".ignore-elements",  // 不能拖拽的选择器(字符串 class)preventOnFilter: true, // 调用“event.preventDefault()”时触发“filter”draggable: ".item",  // 指定元素中的哪些项应该是可拖动的class。ghostClass: "sortable-ghost",  // 设置拖动元素的class的占位符的类名。chosenClass: "sortable-chosen",  // 设置被选中的元素的classdragClass: "sortable-drag",  //拖动元素的class。forceFallback: false,  // 忽略HTML5的DnD行为,并强制退出。(h5里有个属性也是拖动,这里是为了去掉H5拖动对这个的影响)fallbackClass: "sortable-fallback",  // 使用forceFallback时克隆的DOM元素的类名。fallbackOnBody: false,  // 将克隆的DOM元素添加到文档的主体中。(默认放在被拖动元素的同级)fallbackTolerance: 0, // 用像素指定鼠标在被视为拖拽之前应该移动的距离。scroll: true, // or HTMLElementscrollFn: function(offsetX, offsetY, originalEvent, touchEvt, hoverTargetEl) { ... },scrollSensitivity: 30, // pxscrollSpeed: 10, // px
事件:
start,add,remove,update,end,choose,unchoose,sort,filter,clonestart (evt) {} // 刚开始拖动时候触发
add (evt) {} // 拖拽新增的时候触发
remove (evt) {} // 从列表拖走,移除触发
update (evt) {} // 列表更新触发
end (evt) {} // 和start对应,拖拽完了触发
choose(evt) {} // 选择拖拽元素触发
sort (evt) {} // 排序触发
change (evt) {} // 这个很重要,如果数据不是整个提交,单个提交数据的时候就会用到它 evt.added.element / evt.removed.element如果这个列表添加元素就会added的数据,如果删除元素就是removed的元素,还会获取到移动和删除的所在位置index
:move (evt, dragevt) {} // 这个也很重要,在两个列表相互拖拽的时候,有时候需要更新ui,在接口还没有更新之前,所以就会用到move,他是把元素从一个列表拖到另一个列表的瞬间触发,这时候可以给原来的位置设置元素样式等等。

相关文章:

vuedraggable

官方文档&#xff1a;https://www.npmjs.com/package/vuedraggable 中文文档&#xff1a;http://www.itxst.com/vue-draggable/tutorial.html 案例下载地址&#xff1a; https://github.com/SortableJS/Vue.Draggable.git vuedraggablehttps://sortablejs.github.io/Vue.Dr…...

新手从事直播软件源码开发搭建经验与技巧

如果从YY或六间房的PC秀场直播间系统软件算起&#xff0c;直播软件已经在国内风云了至少10年了&#xff0c;站在用户角度提到直播系统大家基本都知道核心功能有开直播刷礼物等&#xff0c;那么如果站在直播软件源码开发搭建的技术角度去看呢&#xff1f;是不是要从需求调研分析…...

相机不动,机构动作----Hands Eyes

最近在研究 手眼标定&#xff0c;发现大家都需付费&#xff0c;搞啥子&#xff0c;说好的开源。。。 以相机在上固定不动&#xff0c;机械手为 EPSON_Robot 为例&#xff0c;详细的一步一步实例操作指引 EPSON_Robot 的192.168.0.1 2004 Server 详细操作步骤 1. 启动程序 运…...

Scala的导入

//导入 //(1) 创建包&#xff1a;在src上右键&#xff0c;新建软件包 //(2)填写包名&#xff1a;小写 //(3)在包上右键&#xff0c;创建类。自动加入包名 //(4)导入。import 包名.类名 //导入多个类 //import jh.yuanlixueyuan.bigdata.scala03.{A,B,C} //导入包下的所有的类 /…...

vue2中父子组件传值案例总结

在 Vue 2 中&#xff0c;父子组件之间的传值是通过 props 和事件来实现的。下面是详细的解释和总结&#xff1a; 1. 父组件向子组件传值 父组件可以通过 props 向子组件传递数据。以下是一个简单的示例&#xff1a; 父组件 (Parent.vue) <template><div><h1…...

功能篇:springboot中实现文件导出

### Spring Boot 中实现文件导出功能 #### 概述 在现代Web应用程序中&#xff0c;文件导出是一个常见的需求&#xff0c;允许用户将数据以特定格式&#xff08;如CSV、Excel、PDF等&#xff09;下载到本地。本文将详细介绍如何使用Spring Boot实现文件导出功能&#xff0c;并…...

Redis客户端(Jedis、RedisTemplate、Redisson)

1. 简介 Redis作为一个当下很火热的非关系型数据库&#xff0c;Java从业人员基本都离不开对Redis的使用。在Java程序中该数据库&#xff0c;需要借助于市面上的开源客户端&#xff0c;如Jedis、Spring Data Redis、Redisson&#xff0c;它们可以作为操作Redis非关系型数据库的桥…...

Mybatis中SQL的执行过程

文章目录 Mybatis 框架SQL执行过程数据库操作映射方式SQL的执行过程- SQL解析- SQL参数映射- SQL预编译- SQL执行- 结果映射- 事务处理- 缓存处理- 日志记录与监控 扩展#与$的区别- $ 符号- # 符号总结示例 Mybatis SQL分类- 动态 SQL- 静态 SQL静态SQL和动态SQL选择${}、#{}与…...

【数据结构——栈与队列】顺序栈的基本运算(头歌实践教学平台习题)【合集】

目录&#x1f60b; 任务描述 相关知识 测试说明 我的通关代码: 测试结果&#xff1a; 任务描述 本关任务&#xff1a;编写一个程序实现顺序栈的基本运算。 相关知识 为了完成本关任务&#xff0c;你需要掌握&#xff1a; 初始化栈、销毁栈、判断栈是否为空、进栈、出栈、取…...

【论文阅读】PRIS: Practical robust invertible network for image steganography

内容简介 论文标题&#xff1a;PRIS: Practical robust invertible network for image steganography 作者&#xff1a;Hang Yang, Yitian Xu∗, Xuhua Liu∗, Xiaodong Ma∗ 发表时间&#xff1a;2024年4月11日 Engineering Applications of Artificial Intelligence 关键…...

在Linux桌面系统普及化方面的一些建议

在推动Linux桌面系统普及化的过程中&#xff0c;可以考虑以下几个方案和策略&#xff1a; 用户友好性改进&#xff1a; 界面设计&#xff1a;提升用户界面的美观性和易用性&#xff0c;使其更接近或超越主流操作系统的用户体验。软件兼容性&#xff1a;确保常用软件&#xff08…...

LLM - 多模态大模型的开源评估工具 VLMEvalKit 部署与测试 教程

欢迎关注我的CSDN&#xff1a;https://spike.blog.csdn.net/ 本文地址&#xff1a;https://spike.blog.csdn.net/article/details/144353087 免责声明&#xff1a;本文来源于个人知识与公开资料&#xff0c;仅用于学术交流&#xff0c;欢迎讨论&#xff0c;不支持转载。 VLMEva…...

数据结构(Queue队列)

前言&#xff1a; 在计算机科学中&#xff0c;数据结构是构建高效算法和程序的基础&#xff0c;而队列&#xff08;Queue&#xff09;作为一种经典的线性数据结构&#xff0c;具有重要的地位。与栈&#xff08;Stack&#xff09;不同&#xff0c;队列遵循“先进先出”&#xf…...

Qt 图形框架下图形拖动后位置跳动问题

在使用Qt 的图形框架QGraphicsScene&#xff0c;QGraphicsView实现图形显示时。遇到一个很棘手的BUG。 使用的图形是自定义的QGraphicsObject的子类。 现象是将图形添加到画布上之后&#xff0c;用鼠标拖动图形&#xff0c;图形能正常改变位置&#xff0c;当再次用鼠标点击图…...

【Linux篇】走进Linux — 开启开源操作系统之旅

文章目录 初识Linux一.Linux的起源与发展二.Linux的特点三.Linux的应用四.Linux的发行版本 Linux环境搭建一.Linux环境的搭建方式二.购买云服务器三.使用XShell远程登陆到Linux 初识Linux 一.Linux的起源与发展 1.初始动机&#xff1a; Linux是一个功能强大的开源操作系统&am…...

如何利用DBeaver配置连接MongoDB和人大金仓数据库

最近根据国产化要求&#xff0c;需要使用国产数据库&#xff0c;但习惯使用DBeaver连接各种成熟的商业或开源数据库。因此&#xff0c;就想着如何继续基于该工具&#xff0c;连接MongoDB和人大金仓数据库&#xff0c;查了半天很多地方说法不统一&#xff0c;所以自己就简单整理…...

Android 车载虚拟化底层技术-Kernel 5.10 -Android12(multi-cards)技术实现

详细代码实现见 Android Display Graphics系列文章-汇总​​​​​​Android Display Graphics系列文章-汇总 Android Display Graphics系列文章-汇总 Android Display Graphics系列文章-汇总 本文主要包括部分&#xff1a; 一、Android12的Kernel 5.10版本 1.1 Kernel 5…...

Qt之点击鼠标右键创建菜单栏使用(六)

Qt开发 系列文章 - menu&#xff08;六&#xff09; 目录 前言 一、示例演示 二、菜单栏 1.MenuBar 2.Menu 总结 前言 QMainWindow是一个为用户提供主窗口程序的类&#xff0c;包含一个菜单栏&#xff08;menubar&#xff09;、多个工具栏(toolbars)、一个状态栏(status…...

开发一套SDK 第一弹

自动安装依赖包 添加条件使能 #ex: filetypesh bash_ls 识别 达到预期,多个硬件环境 等待文件文件系统挂在完成 或者创建 /sys/class/ 属性文件灌入配置操作 AI 提供的 netlink 调试方法,也是目前主流调用方法,socket yyds #include <linux/module.h> #include <linux…...

sftp+sshpass

实现场景&#xff0c;要求客户端定时将本地的日志文件传输到服务器。 工作环境ubuntu&#xff0c;注意不通操作系统的版本不通&#xff0c;依赖的工具的版本也有所不同 实现目标需要客户端满足安装工具&#xff1a; 1、下载安装sshpass ---安装命令&#xff1a;sudo apt-ge…...

未来机器人的大脑:如何用神经网络模拟器实现更智能的决策?

编辑&#xff1a;陈萍萍的公主一点人工一点智能 未来机器人的大脑&#xff1a;如何用神经网络模拟器实现更智能的决策&#xff1f;RWM通过双自回归机制有效解决了复合误差、部分可观测性和随机动力学等关键挑战&#xff0c;在不依赖领域特定归纳偏见的条件下实现了卓越的预测准…...

Nginx server_name 配置说明

Nginx 是一个高性能的反向代理和负载均衡服务器&#xff0c;其核心配置之一是 server 块中的 server_name 指令。server_name 决定了 Nginx 如何根据客户端请求的 Host 头匹配对应的虚拟主机&#xff08;Virtual Host&#xff09;。 1. 简介 Nginx 使用 server_name 指令来确定…...

python爬虫:Newspaper3k 的详细使用(好用的新闻网站文章抓取和解析的Python库)

更多内容请见: 爬虫和逆向教程-专栏介绍和目录 文章目录 一、Newspaper3k 概述1.1 Newspaper3k 介绍1.2 主要功能1.3 典型应用场景1.4 安装二、基本用法2.2 提取单篇文章的内容2.2 处理多篇文档三、高级选项3.1 自定义配置3.2 分析文章情感四、实战案例4.1 构建新闻摘要聚合器…...

在Ubuntu中设置开机自动运行(sudo)指令的指南

在Ubuntu系统中&#xff0c;有时需要在系统启动时自动执行某些命令&#xff0c;特别是需要 sudo权限的指令。为了实现这一功能&#xff0c;可以使用多种方法&#xff0c;包括编写Systemd服务、配置 rc.local文件或使用 cron任务计划。本文将详细介绍这些方法&#xff0c;并提供…...

微服务商城-商品微服务

数据表 CREATE TABLE product (id bigint(20) UNSIGNED NOT NULL AUTO_INCREMENT COMMENT 商品id,cateid smallint(6) UNSIGNED NOT NULL DEFAULT 0 COMMENT 类别Id,name varchar(100) NOT NULL DEFAULT COMMENT 商品名称,subtitle varchar(200) NOT NULL DEFAULT COMMENT 商…...

【决胜公务员考试】求职OMG——见面课测验1

2025最新版&#xff01;&#xff01;&#xff01;6.8截至答题&#xff0c;大家注意呀&#xff01; 博主码字不易点个关注吧,祝期末顺利~~ 1.单选题(2分) 下列说法错误的是:&#xff08; B &#xff09; A.选调生属于公务员系统 B.公务员属于事业编 C.选调生有基层锻炼的要求 D…...

【JavaWeb】Docker项目部署

引言 之前学习了Linux操作系统的常见命令&#xff0c;在Linux上安装软件&#xff0c;以及如何在Linux上部署一个单体项目&#xff0c;大多数同学都会有相同的感受&#xff0c;那就是麻烦。 核心体现在三点&#xff1a; 命令太多了&#xff0c;记不住 软件安装包名字复杂&…...

Linux C语言网络编程详细入门教程:如何一步步实现TCP服务端与客户端通信

文章目录 Linux C语言网络编程详细入门教程&#xff1a;如何一步步实现TCP服务端与客户端通信前言一、网络通信基础概念二、服务端与客户端的完整流程图解三、每一步的详细讲解和代码示例1. 创建Socket&#xff08;服务端和客户端都要&#xff09;2. 绑定本地地址和端口&#x…...

代码随想录刷题day30

1、零钱兑换II 给你一个整数数组 coins 表示不同面额的硬币&#xff0c;另给一个整数 amount 表示总金额。 请你计算并返回可以凑成总金额的硬币组合数。如果任何硬币组合都无法凑出总金额&#xff0c;返回 0 。 假设每一种面额的硬币有无限个。 题目数据保证结果符合 32 位带…...

LINUX 69 FTP 客服管理系统 man 5 /etc/vsftpd/vsftpd.conf

FTP 客服管理系统 实现kefu123登录&#xff0c;不允许匿名访问&#xff0c;kefu只能访问/data/kefu目录&#xff0c;不能查看其他目录 创建账号密码 useradd kefu echo 123|passwd -stdin kefu [rootcode caozx26420]# echo 123|passwd --stdin kefu 更改用户 kefu 的密码…...