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