在vue项目中使用vue.draggable实现拖拽功能

1,172 阅读1分钟

一起养成写作习惯!这是我参与「掘金日新计划 · 4 月更文挑战」的第2天,点击查看活动详情

项目背景

最近做了一个点单的微信小程序,需要上传商品和查看订单,于是就又弄了一个类似后台系统的东西。因为学过一点vue2,为了方便不顾别人劝阻,就用了vue,甚至连脚手架都没有用。果然,在使用组件的时候就出现了很多麻烦。下面的使用都基于这个项目,非介绍类文章。

使用vue.draggable

无奈下的引用办法,使用direct link:

//首先要引用vue
<script src="//cdnjs.cloudflare.com/ajax/libs/vue/2.5.2/vue.min.js"></script>
//由于Draggable是基于Sortable.js的vue组件所以要引入Sortable.js
<script src="//cdn.jsdelivr.net/npm/sortablejs@1.8.4/Sortable.min.js"></script>
//最后引入
<script src="//cdnjs.cloudflare.com/ajax/libs/Vue.Draggable/2.20.0/vuedraggable.umd.min.js"></script>

接着再在vue中注册全局组件

app.component("draggable", window.vuedraggable);

正常情况下此组件已经可以使用了,但是当时我们的组件一直不好用,一度以为是使用的问题,又来来回回看了好几遍文档。后来我的同伴console.log了一下这个组件,才发现根本没有生效。后来我们换了几个direct link 才可以正常使用(经过这次经历坚定了我要学习vue3以及使用脚手架的决心)

<el-dialog v-model="sortVisible" title="拖拽以调整类别展示顺序" width="30%" :before-close="handleClose">
    <draggable v-model="goodClasses" group="people" @start="drag=true" @end="drag=false" item-key="id">
        <template #item="{element}">
            <el-button type="primary" style="display: block;margin-top: 10px;margin-left: 20px;">
                {{element.label}}</el-button>
        </template>
    </draggable>
    <template #footer>
        <span class="dialog-footer">
            <el-button @click="sortVisible = false">取消</el-button>
            <el-button type="primary" @click="upClassFile">提交</el-button>
        </span>
    </template>
</el-dialog>

接着是在html中使用组件,组件的外侧我是用了element实现了弹出框的效果。组件使用v-model双向绑定数据,可以配置拖拽的样式之类的。类似于v-for的使用真的很方便了。

后续安排

接下来我会重构这个项目,有时间会发一下这个组件的具体使用以及案例。