好久没接触vue的项目了,最近接到一个vue图片处理的小项目,有一项需求是要实现拖动图片就行排序。
接到这个需求之后立马想到了Vue.Draggable这款基于Sortable.js实现的vue拖拽插件,下面是实现过程
第一步:安装Vue.Draggable。两种方式npm和yarn (我用的npm)
npm i -S vuedraggable
yarn add vuedraggable
第二步:全局安装完成之后在main.js中全局引用也行在需要的页面也用也没问题 (我因为就一个页面需要我就单页面引入的)
<script>
import draggable from "vuedraggable"
export default {
components: {
draggable
}
}
</script>
第三步:安装和引用都完成了,现在开始使用了。
<template>
<div class="col">
<draggable v-model="data" filter=".forbid" animation="300" :move="onMove">
<transition-group>
<div v-for="(item, index) in data" :key="index">
<div class="img-hover">
<img :src="'http://xxxxx' + item.img"/>
</div>
</div>
</transition-group>
</draggable>
</div>
</template>
注意
/**
*代码中的data为你的数据列表,onMove为你在拖动图片是触发的函数方法。
*transition-group标签下一定是v-for循环,不然会报错。
**/
这样,一个简单的图片拖拽排序的简单demo就完成了。