From a0cc40dd91b9d8ac1ef57f7093608bedd8f1fa52 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=A2=81=E7=81=8F?= <admin@aresn.com>
Date: Thu, 2 Jul 2020 15:00:25 +0800
Subject: [PATCH] Tabs add draggable prop, and @on-drag-drop event

---
 examples/routers/tabs.vue    | 51 +++++++++++++++++++++++++++++-------
 src/components/tabs/tabs.vue | 38 ++++++++++++++++++++++++++-
 2 files changed, 78 insertions(+), 11 deletions(-)

diff --git a/examples/routers/tabs.vue b/examples/routers/tabs.vue
index d4ddf807..353769c8 100644
--- a/examples/routers/tabs.vue
+++ b/examples/routers/tabs.vue
@@ -1,19 +1,47 @@
 <template>
-    <Tabs type="card" @on-contextmenu="handleContextMenu">
-        <TabPane label="标签一" name="tab1" context-menu>标签一的内容</TabPane>
-        <TabPane label="标签二" name="tab2">标签二的内容</TabPane>
-        <TabPane label="标签三" name="tab3" context-menu>标签三的内容</TabPane>
-        <template slot="contextMenu">
-            <DropdownItem @click.native="handleContextMenuEdit">编辑</DropdownItem>
-            <DropdownItem @click.native="handleContextMenuDelete" style="color: #ed4014">删除</DropdownItem>
-        </template>
-    </Tabs>
+   <div>
+       <Tabs type="card" @on-contextmenu="handleContextMenu">
+           <TabPane label="标签一" name="tab1" context-menu>标签一的内容</TabPane>
+           <TabPane label="标签二" name="tab2">标签二的内容</TabPane>
+           <TabPane label="标签三" name="tab3" context-menu>标签三的内容</TabPane>
+           <template slot="contextMenu">
+               <DropdownItem @click.native="handleContextMenuEdit">编辑</DropdownItem>
+               <DropdownItem @click.native="handleContextMenuDelete" style="color: #ed4014">删除</DropdownItem>
+           </template>
+       </Tabs>
+       <Divider></Divider>
+       <Tabs type="card" :draggable="true" @on-drag-drop="handleDragDrop">
+           <TabPane v-for="(tab, index) in tabs" :key="index" :label="tab.label" :name="tab.name">{{ tab.label }}</TabPane>
+       </Tabs>
+   </div>
 </template>
 <script>
     export default {
         data () {
             return {
-                contextData: null
+                contextData: null,
+                tabs: [
+                    {
+                        label: '标签一',
+                        name: 'name1'
+                    },
+                    {
+                        label: '标签二',
+                        name: 'name2'
+                    },
+                    {
+                        label: '标签三',
+                        name: 'name3'
+                    },
+                    {
+                        label: '标签四',
+                        name: 'name4'
+                    },
+                    {
+                        label: '标签五',
+                        name: 'name5'
+                    }
+                ]
             }
         },
         methods: {
@@ -25,6 +53,9 @@
             },
             handleContextMenuDelete () {
                 this.$Message.info('Click delete of ' + this.contextData.name);
+            },
+            handleDragDrop (name, newName, a, b, names) {
+                this.tabs.splice(b,1,...this.tabs.splice(a, 1 , this.tabs[b]));
             }
         }
     }
diff --git a/src/components/tabs/tabs.vue b/src/components/tabs/tabs.vue
index ae17c3c0..a7d8d299 100644
--- a/src/components/tabs/tabs.vue
+++ b/src/components/tabs/tabs.vue
@@ -15,7 +15,18 @@
                     <div ref="navScroll" :class="[prefixCls + '-nav-scroll']" @DOMMouseScroll="handleScroll" @mousewheel="handleScroll">
                         <div ref="nav" :class="[prefixCls + '-nav']" :style="navStyle">
                             <div :class="barClasses" :style="barStyle"></div>
-                            <div :class="tabCls(item)" v-for="(item, index) in navList" @click="handleChange(index)" @dblclick="handleDblclick(index)" @contextmenu.stop="handleContextmenu(index, $event)" @selectstart.stop="handlePreventSelect(index, $event)">
+                            <div
+                                :class="tabCls(item)"
+                                v-for="(item, index) in navList"
+                                @click="handleChange(index)"
+                                @dblclick="handleDblclick(index)"
+                                @contextmenu.stop="handleContextmenu(index, $event)"
+                                @selectstart.stop="handlePreventSelect(index, $event)"
+                                :draggable="draggable"
+                                @dragstart="handleDrag(index, $event)"
+                                @drop="handleDrop(index, $event)"
+                                @dragover.prevent
+                            >
                                 <Icon v-if="item.icon !== ''" :type="item.icon"></Icon>
                                 <Render v-if="item.labelType === 'function'" :render="item.label"></Render>
                                 <template v-else>{{ item.label }}</template>
@@ -107,6 +118,11 @@
             name: {
                 type: String
             },
+            // 4.3.0
+            draggable: {
+                type: Boolean,
+                default: false
+            }
         },
         data () {
             return {
@@ -522,6 +538,26 @@
                         }, transitionTime);
                     }
                 });
+            },
+            // 拖拽
+            handleDrag (index, event) {
+                const nav = this.navList[index];
+                if (nav) {
+                    event.dataTransfer.setData('tab-name', nav.name);
+                }
+            },
+            handleDrop (index, event) {
+                const nav = this.navList[index];
+                if (nav) {
+                    const dragName = event.dataTransfer.getData('tab-name');
+                    event.preventDefault();
+
+                    let navNames = this.navList.map(item => item.name);
+                    const a = parseInt(navNames.findIndex(item => item === dragName));
+                    const b = parseInt(navNames.findIndex(item => item === nav.name));
+                    navNames.splice(b, 1, ...navNames.splice(a, 1 , navNames[b]));
+                    this.$emit('on-drag-drop', dragName, nav.name, a, b, navNames);
+                }
             }
         },
         watch: {