当前位置: 首页 > 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…...

大数据零基础学习day1之环境准备和大数据初步理解

学习大数据会使用到多台Linux服务器。 一、环境准备 1、VMware 基于VMware构建Linux虚拟机 是大数据从业者或者IT从业者的必备技能之一也是成本低廉的方案 所以VMware虚拟机方案是必须要学习的。 &#xff08;1&#xff09;设置网关 打开VMware虚拟机&#xff0c;点击编辑…...

【解密LSTM、GRU如何解决传统RNN梯度消失问题】

解密LSTM与GRU&#xff1a;如何让RNN变得更聪明&#xff1f; 在深度学习的世界里&#xff0c;循环神经网络&#xff08;RNN&#xff09;以其卓越的序列数据处理能力广泛应用于自然语言处理、时间序列预测等领域。然而&#xff0c;传统RNN存在的一个严重问题——梯度消失&#…...

前端开发面试题总结-JavaScript篇(一)

文章目录 JavaScript高频问答一、作用域与闭包1.什么是闭包&#xff08;Closure&#xff09;&#xff1f;闭包有什么应用场景和潜在问题&#xff1f;2.解释 JavaScript 的作用域链&#xff08;Scope Chain&#xff09; 二、原型与继承3.原型链是什么&#xff1f;如何实现继承&a…...

根据万维钢·精英日课6的内容,使用AI(2025)可以参考以下方法:

根据万维钢精英日课6的内容&#xff0c;使用AI&#xff08;2025&#xff09;可以参考以下方法&#xff1a; 四个洞见 模型已经比人聪明&#xff1a;以ChatGPT o3为代表的AI非常强大&#xff0c;能运用高级理论解释道理、引用最新学术论文&#xff0c;生成对顶尖科学家都有用的…...

华硕a豆14 Air香氛版,美学与科技的馨香融合

在快节奏的现代生活中&#xff0c;我们渴望一个能激发创想、愉悦感官的工作与生活伙伴&#xff0c;它不仅是冰冷的科技工具&#xff0c;更能触动我们内心深处的细腻情感。正是在这样的期许下&#xff0c;华硕a豆14 Air香氛版翩然而至&#xff0c;它以一种前所未有的方式&#x…...

群晖NAS如何在虚拟机创建飞牛NAS

套件中心下载安装Virtual Machine Manager 创建虚拟机 配置虚拟机 飞牛官网下载 https://iso.liveupdate.fnnas.com/x86_64/trim/fnos-0.9.2-863.iso 群晖NAS如何在虚拟机创建飞牛NAS - 个人信息分享...

数学建模-滑翔伞伞翼面积的设计,运动状态计算和优化 !

我们考虑滑翔伞的伞翼面积设计问题以及运动状态描述。滑翔伞的性能主要取决于伞翼面积、气动特性以及飞行员的重量。我们的目标是建立数学模型来描述滑翔伞的运动状态,并优化伞翼面积的设计。 一、问题分析 滑翔伞在飞行过程中受到重力、升力和阻力的作用。升力和阻力与伞翼面…...

springboot 日志类切面,接口成功记录日志,失败不记录

springboot 日志类切面&#xff0c;接口成功记录日志&#xff0c;失败不记录 自定义一个注解方法 import java.lang.annotation.ElementType; import java.lang.annotation.Retention; import java.lang.annotation.RetentionPolicy; import java.lang.annotation.Target;/***…...

电脑桌面太单调,用Python写一个桌面小宠物应用。

下面是一个使用Python创建的简单桌面小宠物应用。这个小宠物会在桌面上游荡&#xff0c;可以响应鼠标点击&#xff0c;并且有简单的动画效果。 import tkinter as tk import random import time from PIL import Image, ImageTk import os import sysclass DesktopPet:def __i…...

Tauri2学习笔记

教程地址&#xff1a;https://www.bilibili.com/video/BV1Ca411N7mF?spm_id_from333.788.player.switch&vd_source707ec8983cc32e6e065d5496a7f79ee6 官方指引&#xff1a;https://tauri.app/zh-cn/start/ 目前Tauri2的教程视频不多&#xff0c;我按照Tauri1的教程来学习&…...