Vue 组件总结 (拖拽组件 Vue-draggable)

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Vue 组件总结 (拖拽组件 Vue-draggable)相关的知识,希望对你有一定的参考价值。

一、vue-draggable 安装使用npm地址:

            https://www.npmjs.com/package/vuedraggable

二、表格拖拽使用, 举例:

    <table class="table table-condensed">
         <thead>
                <tr>
                        <th>视频ID</th>
                        <th>名称</th>
                        <th>作者</th>
                        <th>创建时间</th>
                        <th>时长</th>
                        <th>操作</th>
                </tr>
            </thead>
            <draggable element="tbody" class="list-group" v-model="tableData">
                    <tr style="cursor:move;" v-for="(item,index) in tableData" :key="‘item‘+index">
                            <td>{{item.videoId}}</td>
                            <td>{{item.name}}</td>
                            <td>{{item.author.name}}</td>
                            <td>{{item.createTime}}</td>
                            <td>{{item.length}}</td>
                            <td>删除</td>
                    </tr>
            </draggable>
    </table>

    <script>
                import draggable from ‘vuedraggable‘
                export default {
                        components: { draggable },
                        data() {
                                return {
                                    tableData: {}
                                }
                        }
                }
    </script>

以上是关于Vue 组件总结 (拖拽组件 Vue-draggable)的主要内容,如果未能解决你的问题,请参考以下文章

Vuedraggable 拖拽组件插件

vue 使用拖拽拉伸组件vue-drag-resize

vuedraggable拖拽任意组件并改变数据排序

Vue3拖拽缩放组件,支持吸附对齐,实时参考线等

最好用的 6 款 Vue 拖拽组件库推荐 - 卡拉云

vue.draggable拖拽组件中用transition-group包裹拖拽组件了,拖拽还是没有动画?