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文件，将代码复制到…...
WeChatMsg终极指南：三步永久保存微信聊天记录并生成精美年度报告
WeChatMsg终极指南：三步永久保存微信聊天记录并生成精美年度报告 【免费下载链接】WeChatMsg 提取微信聊天记录，将其导出成HTML、Word、CSV文档永久保存，对聊天记录进行分析生成年度聊天报告 项目地址: https://gitcode.com/GitHub_Trendin…...
2026届必备的五大AI写作神器推荐榜单
Ai论文网站排名（开题报告、文献综述、降aigc率、降重综合对比） TOP1. 千笔AI TOP2. aipasspaper TOP3. 清北论文 TOP4. 豆包 TOP5. kimi TOP6. deepseek 在学术写作这个范畴当中，可以用来写论文的人工智能工具已然变为能够提高效率以及…...
利用快马平台快速构建Hermes Agent多模态AI演示原型
最近在研究多模态AI智能体框架时，发现了开源的Hermes Agent项目。它最吸引我的地方是能够处理图片、文档等不同模态的输入，并给出智能响应。为了快速验证它的能力，我尝试在InsCode(快马)平台上搭建了一个演示原型，整个过程比想象中…...
2026年哪款充电宝性价比高？充电宝性价比最高的十大品牌推荐！
大家出门越发依赖手机，但手机没电真的太让人焦虑。这个时候，就需要一台实用的充电宝，但自己购买的充电宝，十有八九都有毛病，不是发热，就是鼓包，最后发现充电宝越充越慢，甚至化身定时…...
告别Charles！用Python神器mitmproxy在Windows上抓包模拟器App，保姆级配置避坑指南
告别Charles！用Python神器mitmproxy在Windows上抓包模拟器App，保姆级配置避坑指南 在移动开发与爬虫领域，抓包工具如同开发者的"第三只眼"。传统工具如Charles和Fiddler虽然功能强大，但面对复杂的定制化需求时ÿ…...
独立开发者如何利用Taotoken多模型能力打造个性化AI应用
独立开发者如何利用Taotoken多模型能力打造个性化AI应用 1. 多模型统一接入的价值 对于独立开发者和小型工作室而言，构建AI增强型应用时面临的核心挑战之一是如何平衡模型能力与开发成本。不同的大模型在创意生成、逻辑推理、代码补全等场景下表现各异，…...
智慧医疗磁共振成像脑中风图像分类数据集1887张2类别
数据集类型：图像分类用，不可用于目标检测无标注文件数据集格式：仅仅包含jpg图片，每个类别文件夹下面存放着对应图片图片数量(jpg文件个数)：1887分类类别数：2类别名称:[Normal,Stroke]每个类别图片数&#x…...
)
pywinauto实战：如何精准定位Windows桌面应用里的‘顽固’控件？(附Inspect工具使用技巧)
pywinauto高级控件定位指南：破解WPF/Qt应用的自动化难题 当你在Windows自动化测试中遇到那些"顽固"控件时，是否感到束手无策？那些用常规方法无法定位的WPF按钮、Qt输入框或自定义控件，往往成为自动化脚本中的绊脚石。本…...
Cortex-A35嵌入式开发常见问题与调试技巧
1. Cortex-A35常见编程问题深度解析在嵌入式系统开发领域，Arm Cortex-A35作为一款高效节能的处理器核心，广泛应用于各类低功耗设备中。但在实际开发过程中，开发者经常会遇到一些与内存管理、异常处理和调试跟踪相关的"坑"。这些问题…...
全球LLM大模型客户端体验深度测评（二）：国产九大势力各显神通（截至2026年4月）
全球LLM大模型客户端体验深度测评（二）：国产九大势力各显神通（截至2026年4月）前言：在上一篇《海外四大巨头格局解构》中，我们见识了 Claude 的代码沙箱与 GPT 的智能体工作流。但不可否认&#x…...