vue实现可拖拽列表

直接上代码

<!-- vue实现可拖拽列表 -->
<template><div><button @click="logcolig">打印数据</button><TransitionGroup name="list" tag="div" class="container"><divclass="item"v-for="(item, i) in list":key="item.id":draggable="true"@dragstart="dragstart($event, i)"@dragenter="dragenter($event, i)"@dragend="dragend"@dragover="dragover">{{ item.name }}</div></TransitionGroup></div>
</template><script>
let dragIndex = 0;export default {created() {},mounted() {},beforeDestroy() {},props: {},data() {return {list: [{ name: "a", id: 1 },{ name: "b", id: 2 },{ name: "c", id: 3 },{ name: "d", id: 4 },{ name: "e", id: 5 },],};},//方法集合methods: {logcolig(){console.log(this.list);},dragstart(e, index) {e.stopPropagation();dragIndex = index;setTimeout(() => {e.target.classList.add("moveing");}, 0);},dragenter(e, index) {e.preventDefault();// 拖拽到原位置时不触发if (dragIndex !== index) {const source = this.list[dragIndex];this.list.splice(dragIndex, 1);this.list.splice(index, 0, source);// 更新节点位置dragIndex = index;}},dragover(e) {e.preventDefault();e.dataTransfer.dropEffect = "move";},dragend(e) {e.target.classList.remove("moveing");},},
};
</script>
<style lang="stylus" rel="stylesheet/stylus" scoped>
.item {width: 200px;height: 40px;line-height: 40px;// background-color: #f5f6f8;background-color: skyblue;text-align: center;margin: 10px;color: #fff;font-size: 18px;
}.container {position: relative;padding: 0;
}.moveing {opacity: 0;
}.list-move, .list-enter-active, .list-leave-active {transition: all 0.2s ease;
}
</style>

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

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

相关文章

常见请求头与响应头你了解哪些?

常见的 HTTP 请求头和响应头包括&#xff1a; 常见的请求头&#xff1a; User-Agent&#xff1a;标识客户端代理信息&#xff0c;通常用于识别用户使用的浏览器或设备类型。 Accept&#xff1a;指示客户端可以接受的内容类型&#xff0c;例如 text/html, application/json 等…

深度学习记录--激活函数

激活函数的种类 对于激活函数的选择&#xff0c;通常有以下几种 sigmoid&#xff0c;tanh&#xff0c;ReLU&#xff0c;leaky ReLU 激活函数的选择 之前logistic回归一直使用的激活函数都是sigmoid函数&#xff0c;但一般来说&#xff0c;tanh函数是比sigmoid函数更加好的选…

【Python】 生成二维码

创建了一个使用 python 创建二维码的程序。 下面是生成的程序的图像。 功能描述 输入网址&#xff08;URL&#xff09;。 输入二维码的名称。 当单击 QR 码生成按钮时&#xff0c;将使用 QRname 中输入的字符将 QR 码生成为图像。 程序代码 import qrcode import tkinterd…

java泛型:泛型类,泛型方法

今日记录我的泛型使用&#xff0c;供后期查阅。 主要包含泛型类&#xff0c;泛型属性&#xff0c;泛型方法&#xff0c;静态方法中使用泛型。 public class GenericOperationResultRep<T> {private boolean success; // 是否操作成功。true&#xff0c;成功&#xff1b;f…

Oracle的错误信息帮助:Error Help

今天看手册时&#xff0c;发现上面有个提示&#xff1a; Error messages are now available in Error Help. 点击 View Error Help&#xff0c;显示如下&#xff0c;其实就是oerr命令的图形化版本&#xff1a; 点击Database Error Message Index&#xff0c;以下界面等同于命令…

[Kadane算法,前缀和思想]元素和最大的子矩阵

元素和最大的子矩阵 题目描述 输入一个n级方阵&#xff0c;请找到此矩阵的一个子矩阵&#xff0c;此子矩阵的各个元素的和是所有子矩阵中最大的&#xff0c;输出这个子矩阵及这个最大的和。 关于输入 首先输入方阵的级数n&#xff0c; 然后输入方阵中各个元素。 关于输出 …

车载蓝牙音乐流程简单分析

关键类&#xff1a; /packages/apps/Bluetooth/src/com/android/bluetooth/avrcpcontroller/AvrcpControllerStateMachine.java /packages/apps/Bluetooth/src/com/android/bluetooth/avrcpcontroller/AvrcpControllerService.java 一、音乐播放状态 CPP中通过JNI接口将接从…

Python中利用遗传算法探索迷宫出路

更多资料获取 &#x1f4da; 个人网站&#xff1a;ipengtao.com 当处理迷宫问题时&#xff0c;遗传算法提供了一种创新的解决方案。本文将深入探讨如何运用Python和遗传算法来解决迷宫问题。迷宫问题是一个经典的寻路问题&#xff0c;寻找从起点到终点的最佳路径。遗传算法是一…

ActiveMQ断线重连技巧,即通信高可用的配置

最近在做一个内部应用的时候&#xff0c;应用到了ActiveMQ作为服务之间消息传递&#xff0c;解耦服务之间的关联&#xff0c;但是在应用的过程中遇到了连接断线无法重连的问题&#xff0c;下面基于这个问题&#xff0c;深入了解一下ActiveMQ的一些相关原理和知识。 一、前置知…

springboot2 在Java项目中你们是如何配置时间格式响应给前端呢

在 Spring Boot 2 项目中配置时间格式&#xff0c;通常可以通过配置文件&#xff08;application.properties 或 application.yml&#xff09;或者通过 Java 代码进行配置。以下是两种常见的配置方式&#xff1a; 1. 通过配置文件配置时间格式&#xff1a; 在 application.pr…

mybaties plus插入数据,自动回显 机制

结论&#xff1a;mybaties plus会将库里数据自动回显到 要插入的数据上 测试表格 SET NAMES utf8mb4; SET FOREIGN_KEY_CHECKS 0;-- 表结构 DROP TABLE IF EXISTS t_stu; CREATE TABLE t_stu (id int NOT NULL COMMENT id,name varchar(255) CHARACTER SET utf8mb4 COLLATE…

【PyTorch】计算设备

文章目录 1. 介绍2. 查询和使用 1. 介绍 CPU设备意味着所有物理CPU和内存&#xff0c; 这意味着PyTorch的计算将尝试使用所有CPU核心。可以用以下方式表示&#xff1a; torch.device(cpu) GPU设备只代表一个GPU和相应的显存。 torch.device(cuda)如果有多个GPU&#xff0c;我们…

Java解决矩阵对角线元素的和问题

Java解决矩阵对角线元素的和问题 01 题目 给你一个正方形矩阵 mat&#xff0c;请你返回矩阵对角线元素的和。 请你返回在矩阵主对角线上的元素和副对角线上且不在主对角线上元素的和。 示例 1&#xff1a; 输入&#xff1a;mat [[1,2,3],[4,5,6],[7,8,9]] 输出&#xff1a…

为什么流量对店铺转化率重要?亚马逊、速卖通等跨境卖家通过自养号测评提升店铺转化率

亚马逊、速卖通等电商平台卖家非常清楚流量对店铺转化率的重要性&#xff0c;测评补单在跨境电商卖家中扮演着重要的角色&#xff0c;是一种必要的运营手段之一。在追求更好的产品曝光和更高的转化率时&#xff0c;Listing的排名是关键因素之一。而在各个平台的Listing中&#…

正确使用AFX_MANAGE_STATE宏管理MFC模块状态, AFX_MANAGE_STATE宏作用,真的很重要!!!

简介&#xff1a; 在使用 MFC&#xff08;Microsoft Foundation Classes&#xff09;开发 DLL&#xff08;动态链接库&#xff09;时&#xff0c;正确管理 MFC 模块状态是确保功能正常运行的关键。本文将深入探讨使用 AFX_MANAGE_STATE 宏的重要性&#xff0c;以及在 DLL 中正确…

连接Redis报错解决方案

连接Redis报错&解决方案 问题描述&#xff1a;Could not connect to Redis at 127.0.0.1:6379: 由于目标计算机积极拒绝&#xff0c;无法连接。 问题原因&#xff1a;redis启动方式不正确 解决方案&#xff1a; 在redis根目录下打开命令行窗口&#xff0c;输入命令redi…

听GPT 讲Rust源代码--src/tools(12)

File: rust/src/tools/rust-analyzer/crates/rust-analyzer/src/config.rs 在Rust源代码中&#xff0c;rust/src/tools/rust-analyzer/crates/rust-analyzer/src/config.rs文件的作用是定义和解析rust-analyzer的配置文件。该文件包含了各种配置项的数据结构和枚举类型&#xf…

MQTT主题、通配符和最佳实践

MQTT主题在MQTT生态系统非常重要&#xff0c;因为代理&#xff08;broker&#xff09;依赖主题确定哪个客户端接收指定的主题。本文我们将聚集MQTT主题、MQTT通配符&#xff0c;详细讨论使用它们的最佳实践&#xff0c;也会探究SYS主题&#xff0c;提供给代理&#xff08;broke…

【npm | npm常用命令及镜像设置】

npm常用命令及镜像设置 概述常用命令对比本地安装全局安装--save &#xff08;或 -S&#xff09;--save-dev &#xff08;或 -D&#xff09; 镜像设置设置镜像方法切换回npm官方镜像选择镜像源 主页传送门&#xff1a;&#x1f4c0; 传送 概述 npm致力于让 JavaScript 开发变得…

iOS——UIPickerView选择器

UIPickerView UIPickerView是 iOS 开发中常用的用户界面组件之一&#xff0c;用于在垂直方向上显示一个滚动的列表&#xff0c;用户可以通过滚动选择其中的一项。 UIPickerView的协议方法 UIPickerView和UItableView差不多&#xff0c;UIPickerView也要设置代理和数据源。UI…