vue Draggable实现拖动改变顺序

  1. npm install vuedraggable

  2. import draggable from 'vuedraggable'

  3. 示例代码

Test.vue

<template><ul class="sort-ul"><div>45454</div><draggable  group="article" :value="sortArr" @input="handleListChange($event)"><li v-for="(item,index) in sortArr" :key="index"><h2>{{item.title}}</h2></li></draggable></ul>
</template>
<script>
import Draggable from 'vuedraggable';export default {name: 'Test',props:{},data () {return {fileList: [],sortArr:[{title:"00"},{title:"01"},{title:"02"},{title:"03"},{title:"04"},{title:"05"},{title:"06"},{title:"07"},{title:"08"},{title:"09"},],}},components: {Draggable,  },methods: {// 更新位置handleListChange(event){console.log(event);this.sortArr = event;}},mounted () {}
}
</script>
<style>ul{padding: 0;width: 400px;}li{width: 100px;float:left;}</style>

main.js

import Vue from 'vue'
import App from './App'
Vue.config.productionTip = false/* eslint-disable no-new */
new Vue({el: '#app',components: { App },template: '<App/>'
})

app.vue

<template><div id="app"><Test /></div>
</template><script>import Test from '@/components/Test.vue'export default {name: 'App',components:{Test,},methods: {}
}
</script>

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

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

相关文章

Tablestore入门手册-UpdateRow接口详解

表格存储Tablestore入门手册系列主要介绍表格存储的各个功能接口和适用场景&#xff0c;帮助客户了解和使用表格存储Tablestore。本文对表格存储Tablestore的UpdateRow接口进行介绍&#xff0c;包括其参数、功能示例、使用场景等。 接口概述 UpdateRow接口是表格存储Tablestor…

echarts 中 symbol 自定义图片

在官方文档里面&#xff0c;修改标记的图形&#xff08;symbol&#xff09;的方法有三种&#xff1a; 一&#xff1a;ECharts 提供的标记类型有 ‘circle’, ‘rect’, ‘roundRect’, ‘triangle’, ‘diamond’, ‘pin’, ‘arrow’, ‘none’&#xff1b;例&#xff1a;sym…

给力!一行代码躺赚普通程序员10年薪资!

笔者这两天闲逛知乎&#xff0c;看到了这个帖子&#xff1a;匿名答题&#xff0c;发表于2014年&#xff0c;此外没有留下任何多余信息。2年躺赚200万&#xff0c;相当于普通程序员10年的工资。没想到Pyhon这么强大&#xff0c;怪不得有人说“除了不会生孩子&#xff0c;Python什…

支付宝移动端 Hybrid 解决方案探索与实践

目前 mPaaS H5 容器 Demo 源码已发布至 GitHub&#xff0c;全新的接入方式让你可以一键集成 mPaaS 环境并快速接入 H5 容器&#xff0c;体验统一的容器和内核&#xff0c;获取媲美原生的 Hybrid 方案及完美的动态能力。 支付宝 Hybrid 方案建设与演进 目前支付宝有 2 套 Hybr…

SpringBoot 整合 knife4j

文章目录简述2. 导入依赖3. 创建配置类4. 创建User实体类5. 创建开发接口6. 启动项目简述 Swagger是一款测试文档Api接口&#xff0c;具体用法见SpringBoot整合Swagger。而knife4j是对Swagger进一步封装&#xff0c;其优化了api文档的界面。官网https://doc.xiaominfo.com/kni…

如何将数据仓库从 AWS Redshift 迁移到阿里云 AnalyticDB for PostgreSQL

阿里云AnalyticDB for PostgreSQL&#xff08;以下简称 ADB PG&#xff0c;即原HybridDB for PostgreSQL&#xff09;为基于PostgreSQL内核的MPP架构的实时数据仓库服务&#xff0c;可以支持复杂ETL任务&#xff0c;也支持高性能在线查询&#xff0c;同阿里云生态紧密结合。AWS…

开源项目如何挣钱? Spark 商业化公司创始人曝光心路历程

众所周知&#xff0c;开源项目对软件发展来说至关重要&#xff0c;但仍有人认为用开源项目来赚钱是对开源项目的一种亵渎。HashiCorp联合创始人兼 CTO Armon Dadgar、Databricks CEO Ali Ghodsi 和 a16z 的普通合伙人 Peter Levine 齐聚一堂&#xff0c;详细阐述开源项目变成商…

F1 Query: Declarative Querying at Scale

距离 Google 的上一篇 F1 论文&#xff0c;也就是 F1: A Distributed SQL Database That Scales 已经 5 年过去了&#xff0c;Google 在今年的 VLDB 上终于发布了 F1 的新版本 F1 Query: Declarative Querying at Scale&#xff0c;我们今天就来看一下这篇论文。 2013 年的 F1…

openoffice 安装windows 环境

文章目录一、安装配置启动1. 下载软件2. 安装3. 启动一、安装配置启动 1. 下载软件 https://www.openoffice.org/download/ 4.1.11版本 下载链接 2. 安装 一路下一步安装即可 安装完毕后&#xff0c;在桌面上会有一个openoffice图标 3. 启动 soffice -headless -accept“…

在线看大会!就来云栖号!

背景 抗击2019新型冠状病毒&#xff08;2019-nCoV冠状病毒&#xff09;成了全国人民的头等大事。截至2020年2月7日&#xff0c;中国确诊新型冠状病毒感染者逾3万人。为抗击预防新型冠状病毒&#xff0c;武汉采取封城措施&#xff0c;钟南山院士提倡全家在家不出门隔断病源&…

我为什么放弃Java,却选择Python?

不可否认的是&#xff0c;Python 凭借超广泛的应用方向&#xff0c;已成为了最受欢迎的编程语言。不过&#xff0c;真正让我喜欢上 Python 的原因&#xff0c;是我发现做同样功能的代码&#xff0c;从 Java 换成 Python 以后&#xff0c;代码量直接从 2000 行减少到 200 行。甚…

三大场景,对象存储OSS带你快速上云

本文介绍对象存储OSS的主要应用场景。 图片和音视频等应用的海量存储 OSS可用于图片、音视频、日志等海量文件的存储。各种终端设备、Web网站程序、移动应用可以直接向OSS写入或读取数据。OSS支持流式写入和文件写入两种方式。 网页或者移动应用的静态和动态资源分离 利用海…

word、excel、ppt 办公文件 在线预览

如果想要免费的&#xff0c;可以用 openoffice&#xff0c;实现原理就是&#xff1a; 通过第三方工具openoffice&#xff0c;将word、excel、ppt、txt等文件转换为pdf文件流&#xff1b;当然如果装了Adobe Reader XI&#xff0c;那把pdf直接拖到浏览器页面就可以直接打开预览&a…

云解析DNS能为你做什么?

记录类型 云解析DNS支持A、CNAME、MX、TXT、SRV、AAAA、NS、CAA记录类型。 您可以参阅 添加解析记录 操作文档。 记录类型功能描述AIPV4记录&#xff0c;支持将域名映射到IPv4地址使用AAAAIPV6记录&#xff0c;支持将域名映射到IPv6地址使用CNAME别名记录&#xff0c;支持将域…

生成PDF乱码问题

文章目录1. 准备字体2. 安装字体3. 重启服务器1. 准备字体 将Windows下的Fonts&#xff0c;如&#xff1a;C:\Windows\Fonts&#xff0c;压缩成Fonts.zip压缩包 2. 安装字体 将压缩包拷贝到Linux目录下&#xff0c;执行如下命令即可&#xff1a; unzip Fonts.zip mkdir /u…

30 年开源老兵,10 年躬耕 OpenStack,开源 1000 万行核心代码

受访者 | Jonathan Bryce记者 | 伍杏玲出品 | CSDN&#xff08;ID&#xff1a;CSDNnews&#xff09;万物互联时代下&#xff0c;我们的一切都在依赖计算基础设施&#xff0c;科学、金融、政府、教育、通信和医疗保健依赖现代云基础设施来运行和改进。而开源是让全世界大多数人获…

力展物流公司上云 低成本、实例资源使用效率提升

公司介绍 我们公司是成都力展供应链管理有限公司&#xff0c;于2019年4月注册&#xff0c;注册资金1000万&#xff0c;并于2019年6月投资了四川力展物流有限责任公司和成都力展鸿翔物流有限公司&#xff0c;分别入股900W和400W。业务痛点 我们公司成立不久&#xff0c;但动作频…

OpenOffice+JodConverter实现Office文件到PDF的转换

文章目录1. OpenOffice 下载、安装、启动2. JodConverter下载3. 文件转化4. 中文乱码5. 解决中文乱码1. OpenOffice 下载、安装、启动 openoffice 安装 linux环境 2. JodConverter下载 JodConverter是一款利用OpenOffice进行转化的工具&#xff0c;可以在Office文件和OpenOff…

OpenInfra Days China 2020大会议程已上线!

距离OpenInfra Days China 2020线上活动开幕还有不到半个月的时间&#xff0c;议题征集与筛选工作已于七月底正式结束&#xff0c;目前大会议程已正式公布&#xff01; 本次OpenInfra Days China主题演讲由OpenStack基金会执行董事Jonathan Bryce&#xff0c;中国电子技术标准化…

阿里云高校“在家实践”计划,免费提供2.68亿小时算力!

计划简介 新冠肺炎疫情防控阻击战持续推进&#xff0c;为全力配合教育部延期开学&#xff0c;高校在线上课共同抗击疫情&#xff0c;阿里云弹性计算联合开发者社区紧急上线高校师生“在家实践”计划&#xff0c;向全国高校学生、教师免费提供2.68亿小时云服务器ECS算力&#xf…