vue中原生H5拖拽排序_拖拽图片也是同样的道理
原文地址【vue中原生H5拖拽排序_拖拽图片也是同样的道理】
H5有基于拖拽的事件机制，如果你还不熟悉，请看我之前的文章【拖拽上传】中有介绍。
原生拖拽API实现
由于比较简单直接上代码了：
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>拖拽排序</title><script src="https://cdn.bootcdn.net/ajax/libs/vue/2.7.9/vue.min.js"></script><style>ul {clear: both;list-style: none;overflow: hidden;}li {cursor: pointer;float: left;height: 32px;line-height: 30px;padding: 0 10px;color: #409eff;border: 1px solid #d9ecff;background-color: #ecf5ff;}</style>
</head><body><div id="app"></div><script>new Vue({template: `<div><h1 style="padding-left: 30px;">连词成句</h1><ul><li v-for="(item,index) in list" :key="index" draggable="true" @dragstart="dragstart(item)"@dragenter="onDragEnter(item,$event)" @dragend="onDragEnd">{{item}}</li></ul></div>`,el: '#app',data() {return {oldWord: null,newWord: null,list: ["校长", "爷爷", "我", "给", "唱了首歌"]}},methods: {dragstart(word) {this.oldWord = word},// 记录移动过程中信息onDragEnter(word, e) {this.newWord = worde.preventDefault()},// 拖拽结束onDragEnd() {if (this.oldWord !== this.newWord) {let oldWordIndex = this.list.indexOf(this.oldWord);let newWordIndex = this.list.indexOf(this.newWord);let newList = [...this.list];// 删除老的节点newList.splice(oldWordIndex, 1);// 在列表中目标位置增加新的节点newList.splice(newWordIndex, 0, this.oldWord);this.list = [...newList];}}}})</script>
</body></html>
效果如下：
使用vuedraggable实现拖拽排序
vuedraggable 是基于sortable.js实现的，所以需要先引入sortable.js，如果是npm安装的，则无需再引入。
使用起来也比较简单，代码如下
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>拖拽排序</title><script src="https://cdn.bootcdn.net/ajax/libs/vue/2.7.9/vue.min.js"></script><script src="//cdn.jsdelivr.net/npm/sortablejs@1.8.4/Sortable.min.js"></script><script src="//cdnjs.cloudflare.com/ajax/libs/Vue.Draggable/2.20.0/vuedraggable.umd.min.js"></script><style>ul {clear: both;list-style: none;overflow: hidden;}li {cursor: pointer;float: left;height: 32px;line-height: 30px;padding: 0 10px;color: #409eff;border: 1px solid #d9ecff;background-color: #ecf5ff;}</style>
</head><body><div id="app"></div><script>let draggable = vuedraggable;new Vue({components: {draggable},template: `<div><h1 style="padding-left: 30px;">连词成句</h1><ul><draggable v-model="list" group="people" @start="drag=true" @end="drag=false"><li v-for="(item,index) in list" :key="index">{{item}}</li></draggable></ul></div>`,el: '#app',data() {return {drag: false,list: ["校长", "爷爷", "我", "给", "唱了首歌"]}}})</script>
</body></html>
参考资料
- 拖拽上传
- vue中使用vuedraggable实现图片的拖拽排序
- 基于vue element-ui 封装上传图片组件 功能:上传,删除,预览,上传图片水印,拖拽排序,上传进度条等
相关文章：
vue中原生H5拖拽排序_拖拽图片也是同样的道理
原文地址【vue中原生H5拖拽排序_拖拽图片也是同样的道理】 H5有基于拖拽的事件机制，如果你还不熟悉，请看我之前的文章【拖拽上传】中有介绍。 原生拖拽API实现 由于比较简单直接上代码了： <!DOCTYPE html> <html lang"en&qu…...
【C语言】计算实时太阳角度（高度角、方位角），以及使用stm32单片机实时获取时间戳
整体计算方法 在编写该代码的过程中寻找了多篇博文和论文，综合所有文章且按网上的以0时的方位角的0，且随时间累加累加至360度。我修改了博文和论文的一些角度的计算方法。得到一下代码与网站计算的方位角相互验证过，误差不超过1 验证网站 太…...
创建git仓库
①git init：用于在一个现有的目录中初始化一个新的 Git 仓库。 # 进入你的项目目录，如果你想要在当前目录下初始化 Git 仓库。 git init 这会在当前目录下创建一个名为 .git 的子目录，其中包含 Git 仓库的所有必要文件和目录。（…...
19.悲观锁与乐观锁解析
1.悲观锁 悲观锁比较悲观，它认为如果不锁住这个资源，别的线程就会来争抢，就会造成数据结果错误，所以悲观锁为了确保结果的正确性，会在每次获取并修改数据时，都把数据锁住，让其他线程无法访问该…...
C语言--给出一个点的坐标判断它在单位圆的内部外部还是上面
一.题目描述 给出一个点的坐标判断它在单位圆的内部外部还是上面 例如输入1，0，输出在圆上 二.思路分析 首先，单位圆是以坐标系原点为圆心、半径为1的圆。 给定一个点坐标 (x,y)，我们可以使用勾股定理计算该点到坐标系原点的距…...
变频器基础问答集21-50
21．请问电机软起动器是否能节能?软启动节能效果有限，但可以减少启动对电网的冲击，也可以实现平滑启动，保护电机机组。 根据能量守恒理论,由于加入了相对复杂的控制电路,软启动不但不节能,还会加大能量的消耗,但它可以减小电路的启…...
OpenCvSharp从入门到实践-（01）认识OpenCvSharp开发环境搭建
目录 一、OpenCV 二、OpenCvSharp 三、OpenCvSharp开发环境搭建 四、下载 五、其他 一、OpenCV OpenCV是基于Apache2.0许可（开源）发行的跨平台计算机视觉和机器学习函数库，支持Windows、Linux、Android和Mac OS操作系统。OpenCV由一系…...
OSG文字-渐变文字（4）
渐变文字(osgText::FadeText类)继承自osgText::Text类继承关系图如图9-6所示 图9-6 osgText::FadeText的继承关系图 从继承关系图中可以看出，它继承自osgText::Text类，因此，它具备一般文字属性的设置方法这里不再重复说明。创建渐变文字与一般…...
排查生产环境：MySQLTransactionRollbackException数据库死锁
一. 问题现状 程序直接宕机，并在error.log日志中发现大量的报错日志，如下： ### Error updating database. Cause: com.mysql.cj.jdbc.exceptions.MySQLTransactionRollbackException: Lock wait timeout exceeded; try restarting trans…...
140.【鸿蒙OS开发-01】
鸿蒙开发 (一)、初识鸿蒙1.初识鸿蒙(1).移动通讯技术的发展(2).完整的鸿蒙开发 (二)、鸿蒙系统介绍1.鸿蒙系统的官方定义(1).鸿蒙操作系统概述(2).鸿蒙的生态 2.鸿蒙系统的特点3.鸿蒙和安卓的对比4.鸿蒙开发的发展前景 (三)、鸿蒙开发准备工作1.鸿蒙OS的完整开发流程2.注册并实…...
npm install 下载不下来依赖解决方案
背景 最近在构建 前端自动化部署 的方案中发现了一个问题，就是我在npm install的时候，有时候成功，有时候不成功，而且什么代码也没发生更改，报错也就是那么几个错，所以在此也整理了一下遇到这种情况…...
接口自动化中cookies的处理技术
一，理论知识 为什么有cookie和session？ 因为http协议是一种无状态的协议，即每次服务端接受到客户端的请求时都时一个全新的请求，服务器并不知道客户端的请求记录，session和cookie主要目的就是弥补http的无状态特性 …...
PHP 安装
您需要做什么？ 为了开始使用 PHP，您可以： 找一个支持 PHP 和 MySQL 的 Web 主机在您自己的 PC 机上安装 Web 服务器，然后安装 PHP 和 MySQL 使用支持 PHP 的 Web 主机 如果您的服务器支持 PHP，那么您不需要做任何事情…...
小程序常见操作
测试时访问本地http服务器调用报错 微信开发者工具（右上角）-> 详情->本地设置->不校验合法域名、web-view(业务域名)... -> 去除勾选使用npm包 1) 工程目录下创建package.jsonnpm init(手动完成设定) / npm init -y (默认设定) 2) 安装 np…...
STM32F4串口USART发送为00的解决方案
检查接线是否正确检查TX是否为复用推挽输出 3.检查是否将TX和RX引脚重映射为USART功能 在STM32中，每个GPIO引脚可以配置为不同的复用功能，例如UART、SPI、I2C等。具体来说，GPIO_PinAFConfig函数用于配置GPIO引脚的复用功能。它的参数包括GPIO…...
重磅解读 | 阿里云 云网络领域关键技术创新
云布道师 10 月 31 日，杭州云栖大会，阿里云技术主论坛带来了一场关于阿里云主力产品与技术创新的深度解读，阿里云网络产品线负责人祝顺民带来《云智创新，网络随行》的主题发言，针对阿里云飞天洛神云网络（下…...
【蓝桥杯省赛真题45】Scratch九宫格游戏 蓝桥杯scratch图形化编程 中小学生蓝桥杯省赛真题讲解
目录 scratch九宫格游戏 一、题目要求 编程实现 二、案例分析 1、角色分析...
物联网AI MicroPython学习之语法 ADC数模模块
学物联网，来万物简单IoT物联网！！ ADC 介绍 模块功能: ADC数模转换模块 ADC功能在ESP32引脚32-39上可用，使用默认配置时，ADC引脚上的输入电压必须介于0.0v和1.0v之间（任何高于1.0v的值都将读为4095&#x…...
详解Python中哈希表的使用。站在开发者角度，与大家一起探究哈希的世界。
文章目录 1. 前言2. 哈希表2.1 哈希函数2.2 哈希算法2.3 常见哈希算法2.4 哈希冲突 3.总结关于Python技术储备一、Python所有方向的学习路线二、Python基础学习视频三、精品Python学习书籍四、Python工具包项目源码合集①Python工具包②Python实战案例③Python小游戏源码五、面…...
详解python淘宝秒杀抢购脚本程序实现
文章目录 前言一、官网下载火狐浏览器二、下载geckodriver，并解压到火狐浏览器文件夹根目录三、添加火狐浏览器根目录到系统环境变量四、下载并安装python及pycharm开发工具五、进入淘宝六、使用Pycharm运行脚本，新建python文件，将代码复制到…...
Flask RESTful 示例
目录 1. 环境准备2. 安装依赖3. 修改main.py4. 运行应用5. API使用示例获取所有任务获取单个任务创建新任务更新任务删除任务 中文乱码问题： 下面创建一个简单的Flask RESTful API示例。首先，我们需要创建环境，安装必要的依赖，然后…...
边缘计算医疗风险自查APP开发方案
核心目标：在便携设备（智能手表/家用检测仪）部署轻量化疾病预测模型，实现低延迟、隐私安全的实时健康风险评估。 一、技术架构设计 #mermaid-svg-iuNaeeLK2YoFKfao {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg…...
云启出海，智联未来｜阿里云网络「企业出海」系列客户沙龙上海站圆满落地
借阿里云中企出海大会的东风，以**「云启出海，智联未来｜打造安全可靠的出海云网络引擎」为主题的阿里云企业出海客户沙龙云网络&安全专场于5.28日下午在上海顺利举办，现场吸引了来自携程、小红书、米哈游、哔哩哔哩、波克城市、…...
Redis相关知识总结（缓存雪崩，缓存穿透，缓存击穿，Redis实现分布式锁，如何保持数据库和缓存一致）
文章目录 1.什么是Redis？2.为什么要使用redis作为mysql的缓存？3.什么是缓存雪崩、缓存穿透、缓存击穿？3.1缓存雪崩3.1.1 大量缓存同时过期3.1.2 Redis宕机 3.2 缓存击穿3.3 缓存穿透3.4 总结 4. 数据库和缓存如何保持一致性5. Redis实现分布式…...
STM32F4基本定时器使用和原理详解
STM32F4基本定时器使用和原理详解 前言如何确定定时器挂载在哪条时钟线上配置及使用方法参数配置PrescalerCounter ModeCounter Periodauto-reload preloadTrigger Event Selection 中断配置生成的代码及使用方法初始化代码基本定时器触发DCA或者ADC的代码讲解中断代码定时启动…...
VM虚拟机网络配置（ubuntu24桥接模式）：配置静态IP
编辑-虚拟网络编辑器-更改设置 选择桥接模式，然后找到相应的网卡（可以查看自己本机的网络连接） windows连接的网络点击查看属性 编辑虚拟机设置更改网络配置，选择刚才配置的桥接模式 静态ip设置： 我用的ubuntu24桌…...
与常用工具深度洞察App瓶颈)
iOS性能调优实战：借助克魔(KeyMob)与常用工具深度洞察App瓶颈
在日常iOS开发过程中，性能问题往往是最令人头疼的一类Bug。尤其是在App上线前的压测阶段或是处理用户反馈的高发期，开发者往往需要面对卡顿、崩溃、能耗异常、日志混乱等一系列问题。这些问题表面上看似偶发，但背后往往隐藏着系统资源调度不当…...
JVM 内存结构 详解
内存结构 运行时数据区： Java虚拟机在运行Java程序过程中管理的内存区域。 程序计数器： 线程私有，程序控制流的指示器，分支、循环、跳转、异常处理、线程恢复等基础功能都依赖这个计数器完成。 每个线程都有一个程序计数…...
RSS 2025｜从说明书学习复杂机器人操作任务：NUS邵林团队提出全新机器人装配技能学习框架Manual2Skill
视觉语言模型（Vision-Language Models, VLMs），为真实环境中的机器人操作任务提供了极具潜力的解决方案。 尽管 VLMs 取得了显著进展，机器人仍难以胜任复杂的长时程任务（如家具装配），主要受限于人…...
uniapp 集成腾讯云 IM 富媒体消息（地理位置/文件）
UniApp 集成腾讯云 IM 富媒体消息全攻略（地理位置/文件） 一、功能实现原理 腾讯云 IM 通过 消息扩展机制 支持富媒体类型，核心实现方式： 标准消息类型：直接使用 SDK 内置类型（文件、图片等）自…...