vue.js3: 拖动排序(vue@3.2.37 / vuedraggable@4.1.0)
2023-09-14 08:59:32 时间
一,安装draggable组件:
1,代码地址:
https://github.com/SortableJS/vue.draggable.next
2,下载安装
liuhongdi@lhdpc:/data/vue/pdf/image2pdf$ npm i -S vuedraggable@next added 2 packages in 11s
3,查看已安装的库的版本
liuhongdi@lhdpc:/data/vue/pdf/image2pdf$ npm list vuedraggable@next image2pdf@0.1.0 /data/vue/pdf/image2pdf └── vuedraggable@4.1.0
说明:刘宏缔的架构森林是一个专注架构的博客,地址:https://www.cnblogs.com/architectforest
对应的源码可以访问这里获取: https://github.com/liuhongdi/
或: https://gitee.com/liuhongdi
说明:作者:刘宏缔 邮箱: 371125307@qq.com
二,js代码
<template> <div> 选择图片读取xmp信息(可多选): <input type="file" ref="hiddenfile" accept="image/*" multiple @change="handleFile" class="hiddenInput" /> <div style="width:400px;margin: auto;"> <draggable :list="selFiles" item-key="name" class="list-group" ghost-class="ghost" :move="checkMove" @start="dragging = true" @end="dragging = false" > <template #item="{ element }"> <div class="list-group-item"> <img class="fg" :id="'fg'+element.id" :src="element.fileimg" style="width:400px;display:block;" /> </div> </template> </draggable> </div> </div> </template> <script> import {ref} from "vue" import draggable from "vuedraggable"; export default { name: "DragSort", components: { draggable, }, setup() { //选中的图片文件,保存在数组中 const selFiles = ref([]); //移动事件 const checkMove = (e) => { window.console.log("Future index: " + e.draggedContext.futureIndex); console.log(selFiles.value); } //选中图片时,把图片添加到数组 const handleFile = (e) => { let filePaths = e.target.files; //清空原有缩略图 if (filePaths.length === 0) { //未选择,则返回 return } else { //清空数组中原有图片 selFiles.value.length = 0; } //把新选中的图片加入数组 for( var i=0;i<filePaths.length; i++ ){ let file = filePaths[i]; let one = { id:i, fileimg:URL.createObjectURL(file), //预览用 file:file, } selFiles.value.push(one); } } return { checkMove, selFiles, handleFile, } } } </script> <style scoped> .list-group-item { } .ghost { opacity: 0.5; background: #c8ebfb; } .not-draggable { cursor: no-drop; } </style>
三,测试效果
四,查看vue框架的版本:
liuhongdi@lhdpc:/data/vue/pdf/image2pdf$ npm list vue image2pdf@0.1.0 /data/vue/pdf/image2pdf ├─┬ @vue/cli-plugin-babel@5.0.8 │ └─┬ @vue/babel-preset-app@5.0.8 │ ├─┬ @vue/babel-preset-jsx@1.3.0 │ │ └── vue@3.2.37 deduped invalid: "2.x" from node_modules/@vue/babel-preset-jsx │ └── vue@3.2.37 deduped └─┬ vue@3.2.37 └─┬ @vue/server-renderer@3.2.37 └── vue@3.2.37 deduped
相关文章
- Vue笔记:bin-code-editor使用
- Vue笔记:vue项目引入bootstrap、elementUI、echarts
- VUE - vue.runtime.esm.js?6e6d:619 [Vue warn]: Do not use built-in or reserved HTML elements as component i
- vue-导入静态文件
- vue-loader的简单例子
- [Vue @Component] Define Props on a Vue Class with vue-property-decorator
- [Vue] Get up and running with vue-router
- vue-cli 工程中引入jquery
- Vue路由管理(菜单列表)
- 后台管理系统的权限以及vue处理权限的思路
- 一个典型的Vue应用的App.vue
- vue 的 render 函数的用法:new Vue({ render: h => h(App), }).$mount(‘#app‘)
- vue项目报错导致项目无法启动
- vue:export default 和 export 区别(difference between Vue 'export default' and 'new Vue')
- Vue学习之--------深入理解Vuex之getters、mapState、mapGetters(2022/9/3)
- Vue学习之--------列表排序(ffilter、sort、indexOf方法的使用)、Vue检测数据变化的原理(2022/7/15)
- vue中使用分页组件、将从数据库中查询出来的数据分页展示(前后端分离SpringBoot+Vue)
- vue轮播图
- Vue中vue-i18n结合vant-ui实现国际化
- Vue、Vuejs从入门到精通 | vue-router详解
- 223:vue+openlayers:引用插件,实现探照灯效果
- 047:vue+openlayers:双击鼠标显示品牌代言人名片(示例代码)
- Dockerfile 构建 Vue 镜像踩坑记
- Vue(一)vue 概述与用法、MVVM、绑定语法、vue 指令
- vue-tour快速入门:VUE项目中如何使用vue-tour新手引导指引插件?怎样使用?包含具体实例
- Vue学习笔记——vue-router