美文网首页
Vue拖拽组件 vuedraggable 和 vue-dragg

Vue拖拽组件 vuedraggable 和 vue-dragg

作者: 前端阿峰 | 来源:发表于2020-07-20 15:37 被阅读0次

一、描述

vue 两个不同的库分别是：

两个库的里面不同，一个是直接进行组件封装，一个是进行指令封装。

二、vuedraggable

vuedraggable 是标准的组件式封装，并且将可拖动元素放进了 transition-group 上面，过渡动画都比较好。

使用方式：

yarn add vuedraggable  // npm install vuedraggable

import vuedraggable from  'vuedraggable';

在使用的时候，可以通过 v-model 来双向绑定本地 data，如果需要更新或者是触发父组件监听的事件，可以在 updated() 中去 emit。

引入后直接声明该组件然后使用即可，示例代码：

<template>
    <vuedraggable class="wrapper" v-model="list">
        <transition-group>
            <div v-for="item in list" :key="item" class="item">
                <p>{{item}}</p>
            </div>
        </transition-group>
    </vuedraggable>
</template>
<script>
    import vuedraggable from 'vuedraggable';
    export default {
        name: 'HelloWorld',
        components: {
            vuedraggable
        },
        props: {},
        data() {
            return {
                list: [1, 2, 34, 4, 54, 5]
            }
        },
        updated() {
            console.log(this.list)
        },
        methods: {}
    }
</script >
<style scoped>
    .wrapper {
        display: flex;
        justify-content: center;
        width: 100%;
    }

    .item {
        width: 300px;
        height: 50px;
        background-color: #42b983;
        color: #ffffff;
    }
</style>

实现的效果：

drag_01.gif

官方的示例：

官方的示例 gif：


drag_02.gif

更多的事件及使用方法请参阅：

三、Awe-dnd

vue-dragging 的 npm 包的名字是 awe-dnd，并不是 vue-dragging，这个库的特点是封装了 v-dragging 全局指令，然后通过全局指令去数据绑定等。

相比及 vuedraggable 来说， awe-dnd 是没有双向绑定（这里没有双向绑定并不是很严谨，准确的来说没有暴露双向绑定的方式），因此提供了事件，在拖拽结束的时候用来更新列表（不需要手动更新列表，其实内部是实现了双向绑定的）或者是去触发父组件监听的事件。

安装依赖：

npm install awe-dnd --save yarn add awe-and

使用：

<template>
    <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>
</template>

<!--your.vue-->
<script>
    import VueDND from 'awe-dnd'
    Vue.use(VueDND)
    export default {
        data() {
            return {
                colors: [{
                    text: "Aquamarine"
                }, {
                    text: "Hotpink"
                }, {
                    text: "Gold"
                }, {
                    text: "Crimson"
                }, {
                    text: "Blueviolet"
                }, {
                    text: "Lightblue"
                }, {
                    text: "Cornflowerblue"
                }, {
                    text: "Skyblue"
                }, {
                    text: "Burlywood"
                }]
            }
        },
        /* if your need multi drag mounted: function() { this.colors.forEach((item) => { Vue.set(item, 'isComb', false) }) } */
    }
</script>

可以发现绑定的时候 v-dragging="{ item: color, list: colors, group: 'color' }" 这种形式进行指令绑定，其中 item 就是单个对象，而 list 则是数据列表，group 则是用来声明一个组，来保证可以在一个页面中进行多个数据源的操作。

而提供的两个事件方法如下：

export default { 
    mounted () { 
        this.$dragging.$on('dragged', ({ value }) => { 
            console.log(value.item)
            console.log(value.list) 
            console.log(value.otherData) 
        }) 
        this.$dragging.$on('dragend', (res) => { 
            console.error(res); 
        })
} }

一般使用的方法就是：

this.$dragging.$on('dragend',  (res)  =>  { console.error(res);  })

效果：


drag_03.gif

相关文章