功能:拖拉后,数据重组,然后返回数组给后台处理

代码如下:

<template>

  <el-dialog
title="菜单排序"
:close-on-click-modal="false"
:visible.sync="visible"
width="600px"> <div style="margin: 0 auto;height: 400px;overflow-y: auto;overflow-x: hidden;">
<ul class="dragSort">
<transition-group>
<li
draggable="true"
@dragstart="handlerDragstart"
@drag="handlerDrag"
@dragend="handlerDragend"
:id="index"
v-for="(item, index) in dataList"
:key="item.menuId">
【{{index+1}}】 {{item.name}}
<i><span>{{item.orderNum}}</span></i>
</li>
</transition-group>
</ul>
</div> <!--取消与确认按钮-->
<span slot="footer" class="dialog-footer">
<el-button style="background-color: #479dff;color: #ffffff;" type="primary" @click="handlerCancel()">重置</el-button>
<el-button style="background-color: #479dff;color: #ffffff;" type="primary" @click="handlerSubmit()">确定</el-button>
</span> </el-dialog> </template>
<script>
export default {
props: {}, name: 'dragSort', data () {
return {
//是否弹窗
visible: false, //拖动前数据
beforeDataList: [], //拖动后数据
dataList: [],
} }, methods: { init(){
this.visible = true;
this.$http({
url: this.$http.adornUrl(`/sys/menu/selectHomepageMemu`),
method: 'get',
params: this.$http.adornParams()
}).then(({data}) => {
console.log(data)
this.beforeDataList = data.list;
this.dataList = data.list; })
}, handlerDragstart (e) {
const { y, target } = e
target.style.opacity = '.5'
target.oriY = y
target.oriIndex = Number(target.id)
}, handlerDrag (e) {
const { y, target } = e
if (y === 0) return
const offset = y - target.oriY
const length = this.dataList.length
if (Math.abs(offset) > target.offsetHeight) {
const index = target.oriIndex
const copyList = [...this.dataList]
let targetIndex = index + Math.round(offset / target.offsetHeight)
if (targetIndex > length - 1) {
targetIndex = length - 1
} else if (targetIndex < 0) {
targetIndex = 0
}
const readyToAppend = copyList.splice(index, 1)[0]
copyList.splice(targetIndex, 0, readyToAppend)
target.oriIndex = targetIndex
target.oriY = y
this.dataList = copyList
}
}, handlerDragend (e) {
const { y, target } = e
target.style.opacity = '1'
}, //取消
handlerCancel(){
this.dataList = this.beforeDataList;
}, saveSortingData(){ let menuIdArray = []; if(this.dataList.length > 0){
for(let i=0; i<this.dataList.length; i++){
menuIdArray.push(this.dataList[i].menuId);
}
} this.$http({
      //返回重组数组给后台接口
url: this.$http.adornUrl(`/xxx/xxx/xxx`),
method: 'post',
data: this.$http.adornData(menuIdArray, false)
}).then(({data}) => {
if (data && data.code === 0) {
this.$message({
message: '操作成功',
type: 'success',
duration: 1500,
onClose: () => {
this.init();
}
})
} else {
this.$message.error(data.msg)
}
})
}, //确定
handlerSubmit(){
this.$confirm("该操作将按顺序重新排序?", '提示', {
distinguishCancelAndClose: true,
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
this.saveSortingData(); }).catch(() => {
return;
}); } }
}
</script> <style scoped lang="scss">
.dragSort{
width: 400px;
list-style: none;
margin: 0;
padding: 0;
li{
text-align: left;
border: 1px solid #f1f1f1;
padding: 10px;
box-shadow: 0 2px 8px 0 rgba(0, 0, 0, .1);
border-radius: 5px;
margin-bottom: 10px;
cursor: move;
width: 100%;
background: #fff;
transition: all .3s;
z-index: 1;
i {
font-size: 16px;
color: #409EFF;
float: right;
}
}
}
</style>

功能效果图:

vue项目简单菜单排序的更多相关文章

  1. vue项目导航菜单实现

    vue项目导航菜单问题 目标:横向菜单点击跳转,颜色变换,刷新可保持状态 // 模板template中通过循环菜单列表生成,动态类名改变颜色 <li v-for="(item, ind ...

  2. 使用vue-cli搭建vue项目简单教程

    一直没有时间来写些东西,今天就写写vue脚手架吧,初建一个vue项目. vue是近段时间来特别火的一个mvvm框架,小巧.简单.易学,如果你的前端基础还好的话,学起来挺简单的.官网地址: https: ...

  3. VUE项目二级菜单刷新时404 nginx

    原因:vue项目的路径时虚拟路径,并不存在,所以用nginx去请求请求不到,所以vue项目做了两部调整: 1.所有的请求后端接口地址前端写死 2.nginx里把所有的接口转发后端删掉,并添加以下内容 ...

  4. 简单vue项目脚手架(vue+webpack2.0+vuex+vue-router)

    github地址 使用技术栈 webpack(^2.6.1) webpack-dev-server(^2.4.5) vue(^2.3.3) vuex(^2.3.1) vue-router(^2.5.3 ...

  5. VSCode配置简单的vue项目

    VSCode配置简单的vue项目 https://www.cnblogs.com/wnxyz8023/p/9989447.html 由于最近要使用的项目框架为前后端分离的,采用的是vue.js+web ...

  6. 搭建Vue.js环境,建立一个简单的Vue项目

    基于vue-cli快速构建 Vue是近年来比较火的一个前端框架,所以搭建Vue.js环境,要装webpack,vue-cli,Vue 安装webpack命令如下 $ cnpm install webp ...

  7. day 82 Vue学习二之vue结合项目简单使用、this指向问题

    Vue学习二之vue结合项目简单使用.this指向问题   本节目录 一 阶段性项目流程梳理 二 vue切换图片 三 vue中使用ajax 四 vue实现音乐播放器 五 vue的计算属性和监听器 六 ...

  8. 使用VSCode配置简单的vue项目

    由于最近要使用的项目框架为前后端分离的,采用的是vue.js+webAPI的形式进行开发的.因为之前我没有接触过vue.js,也只是通过视频文档做了一些简单的练习.今天技术主管说让大家熟悉下VSCod ...

  9. 三、使用VSCode配置简单的vue项目

    由于最近要使用的项目框架为前后端分离的,采用的是vue.js+webAPI的形式进行开发的.因为之前我没有接触过vue.js,也只是通过视频文档做了一些简单的练习.今天技术主管说让大家熟悉下VSCod ...

随机推荐

  1. HttpClient POST/SET方法

    前言: 网络API接口:https://api.apiopen.top/searchMusic 此API接口返回类型为JSON格式类型 GET:从指定资源请求数据 POST:向指定资源提交要被处理的数 ...

  2. 程序员的算法课(11)-KMP算法

    版权声明:本文为博主原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明. 本文链接:https://blog.csdn.net/m0_37609579/article/de ...

  3. Python中的Base64编码的加密与解密

    Base64 可以干些啥? Base64编码的作用: 由于某些系统中只能使用ASCII字符.Base64就是用来将非ASCII字符的数据转换成ASCII字符的一种方法. 图片(and种子)base64 ...

  4. 一句话总结flux,以及我们为何需要flux

    如果让你用一句话总结一下什么是flux,该怎么说? 官网上有这样的介绍:flux是一种思想,一种框架,是facebook给react... 这样的解释对程序员来说,显得过于抽象又不具体了. 阮老师的文 ...

  5. powerline字体安装

    安装命令 git clone https://github.com/powerline/fonts ./install.sh 了解powerline ->美化自己的命令行环境,增加漂亮的状态行, ...

  6. Quantitative proteomics of Uukuniemi virus-host cell interactions reveals GBF1 as proviral host factor for phleboviruses(乌库涅米病毒-宿主细胞互作的定量蛋白质组学揭示了GBF1是个白蛉病毒的前病毒宿主因子)-解读人:谭亦凡

    期刊名:Molecular & Cellular Proteomics 发表时间:(2019年12月) IF:4.828 单位:1德国海德堡大学附属医院2德国汉诺威医科大学3德国亥姆霍茲感染研 ...

  7. [TimLinux] 开博一个月了

    做事情,怕的确实是坚持!为了自己尽可能的每天一篇博文,时常在下班后,23点开始写博,有时候写到接近一点钟.但是这第一个月,确实坚持下来了.平均每天一篇.写博的过程,其实是: 知识的总结过程: 因为要求 ...

  8. HDU-1027Ignatius and princess II

    Now our hero finds the door to the BEelzebub feng5166. He opens the door and finds feng5166 is about ...

  9. MySQL面试总结

    MySQL面试总结 # MySQL的存储引擎 `MyISAM`(默认表类型):非事务的存储引擎,基于传统的`ISAM`(有索引的顺序访问方法)类型,是存储记录和文件的标准方法,不是事务安全,不支持外键 ...

  10. SpringBoot系列之集成Druid配置数据源监控

    SpringBoot系列之集成Druid配置数据源监控 继上一篇博客SpringBoot系列之JDBC数据访问之后,本博客再介绍数据库连接池框架Druid的使用 实验环境准备: Maven Intel ...