Vue中实现图标拖拽排序
- 背景概述
作为一名后端菜鸡，笔者从未想过自己会涉及到前端开发，但是最近，老板提出项目的前端页面有些需要优化，提了一大堆需求，我和同事也很懵逼，因为我们两谁都没搞过前端！
老板说：“没事，试试看，这对你们来说应该不难！”话都说到这份儿上了，还能怎么滴？上呗.....
和同事总结了一下需求点，领了任务就一头扎入代码里。首先要就是实现页面4个图标的拖拽排序。
- 过程
第一步、
码农嘛，少不了和百度，谷歌混在一起，接到任务第一件事儿就是百度，谷歌。看到很多博客呀，资料呀，心里还是很窃喜：看来很容易嘛！但是打开这些资料一一查看懵逼了，很多都得写一堆代码，大多数都是移动端实现，而且JS，JQ等等一堆，vue的也有，就是看着麻烦！
作为非前端开发，第一原则就是尽量减少改动量，不然写了bug，没人背锅！！！
返回去看了看自己公司项目使用的是vue，接着集中关于vue的，终于发现一片博客：
https://www.cnblogs.com/zengkai/p/9641769.html
看完后，有顺藤摸瓜，去翻了翻源文档：https://www.npmjs.com/package/awe-dnd
惊喜的发现还有样式演示：
https://hilongjw.github.io/vue-dragging/
仔细看了后，开始动手新建项目跑demo,代码如下：
e<template>
<div class="homm">
homm组件
<div class="color-list">
<div
class="color-item"
v-for="color in colors" v-dragging="{ item: color, list: colors, group: 'color' }"
:key="color.text"
>{{color.text}}</div>
</div>
</div>
</template>
<script>
export default {
name: 'homm',
data() {
return {
colors: [{
text: 'Aquamarine'
}, {
text: 'Hotpink'
}, {
text: 'Gold'
}, {
text: 'Crimson'
}, {
text: 'Blueviolet'
}, {
text: 'Lightblue'
}, {
text: 'Cornflowerblue'
}, {
text: 'Skyblue'
}, {
text: 'Burlywood'
}]
}
},
mounted() {},
methods: {}
}
</script>
<style lang="scss" scoped>
.homm {
}
</style>
可以跑通：
第四步、代码实现
将要拖拽的对象抽数来，放到一个列表里，代码如下：
首先是script部分：
最后添加mounted部分：
export default {
mounted () {
this.$dragging.$on('dragged', ({ value }) => {
console.log(value.item)
console.log(value.list)
console.log(value.otherData)
})
this.$dragging.$on('dragend', () => {
})
}
}
第五步、和源码对比
<div>
<a href="javascript:" @click="ChangeBaseMap('Empty')">
<img src="../assets/images/none.png"/>
<p> 无底图</p>
</a>
</div>
<div>
<a href="javascript:" @click="ChangeBaseMap('img_w')">
<img v-show="!baseMapShow._img" src="../assets/images/view1.png"/>
<img v-show="baseMapShow._img" src="../assets/images/view1c.png"/>
<p>影像底图</p>
</a>
</div>
<div>
<a href="javascript:" @click="ChangeBaseMap('vec_w')">
<img v-show="!baseMapShow._vic" src="../assets/images/view2.png"/>
<img v-show="baseMapShow._vic" src="../assets/images/view2c.png"/>
<p>矢量底图</p>
</a>
</div>
<div>
<a href="javascript:" @click="ChangeBaseMap('ter_w')">
<img v-show="!baseMapShow._ter" src="../assets/images/view3.png"/>
<img v-show="baseMapShow._ter" src="../assets/images/view3c.png"/>
<p>地形底图</p>
</a>
</div>
</div>
- 总结
最终的拖拽效果还不错，总体上代码量不多，由于代码非个人所有，所以这里就不公开全部代码了。感谢这本次开发中帮到我的那篇博客的博主，作为一个菜鸟，不敢说写本文能给大家指导些什么，仅仅供代价参考，如果能帮到您的话，我很开心！谢谢！