From 1a345a7c657bdbd8422103e9034f1a4d19676c0a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E8=8A=B1=E8=A3=A4=E8=A1=A9?= <panfree23@gmail.com>
Date: Wed, 24 Oct 2018 16:06:24 +0800
Subject: [PATCH] feature: add drag select component (#1249)

---
 README.md                                |  1 +
 README.zh-CN.md                          |  1 +
 src/components/DragSelect/index.vue      | 61 ++++++++++++++++++++++++
 src/lang/en.js                           |  1 +
 src/lang/es.js                           |  1 +
 src/lang/zh.js                           |  1 +
 src/router/modules/components.js         |  6 +++
 src/views/components-demo/dragSelect.vue | 43 +++++++++++++++++
 8 files changed, 115 insertions(+)
 create mode 100644 src/components/DragSelect/index.vue
 create mode 100644 src/views/components-demo/dragSelect.vue

diff --git a/README.md b/README.md
index 6a37ec93..e2d9c034 100644
--- a/README.md
+++ b/README.md
@@ -118,6 +118,7 @@ Understanding and learning this knowledge in advance will greatly help the use o
   - Avatar Upload
   - Back To Top
   - Drag Dialog
+  - Drag Select
   - Drag Kanban
   - Drag List
   - SplitPane
diff --git a/README.zh-CN.md b/README.zh-CN.md
index c7d4efbb..28fc0240 100644
--- a/README.zh-CN.md
+++ b/README.zh-CN.md
@@ -130,6 +130,7 @@
   - 头像上传
   - 返回顶部
   - 拖拽Dialog
+  - 拖拽Select
   - 拖拽看板
   - 列表拖拽
   - SplitPane
diff --git a/src/components/DragSelect/index.vue b/src/components/DragSelect/index.vue
new file mode 100644
index 00000000..a08d400a
--- /dev/null
+++ b/src/components/DragSelect/index.vue
@@ -0,0 +1,61 @@
+<template>
+  <el-select v-model="selectVal" v-bind="$attrs" class="drag-select" multiple>
+    <slot/>
+  </el-select>
+</template>
+
+<script>
+import Sortable from 'sortablejs'
+
+export default {
+  name: 'DragSelect',
+  props: {
+    value: {
+      type: Array,
+      required: true
+    }
+  },
+  computed: {
+    selectVal: {
+      get() {
+        return [...this.value]
+      },
+      set(val) {
+        this.$emit('input', [...val])
+      }
+    }
+  },
+  mounted() {
+    this.setSort()
+  },
+  methods: {
+    setSort() {
+      const el = document.querySelectorAll('.el-select__tags > span')[0]
+      this.sortable = Sortable.create(el, {
+        ghostClass: 'sortable-ghost', // Class name for the drop placeholder,
+        setData: function(dataTransfer) {
+          dataTransfer.setData('Text', '')
+          // to avoid Firefox bug
+          // Detail see : https://github.com/RubaXa/Sortable/issues/1012
+        },
+        onEnd: evt => {
+          const targetRow = this.value.splice(evt.oldIndex, 1)[0]
+          this.value.splice(evt.newIndex, 0, targetRow)
+        }
+      })
+    }
+  }
+}
+</script>
+
+<style scoped>
+.drag-select >>> .sortable-ghost{
+  opacity: .8;
+  color: #fff!important;
+  background: #42b983!important;
+}
+
+.drag-select >>> .el-tag{
+  cursor: pointer;
+}
+</style>
diff --git a/src/lang/en.js b/src/lang/en.js
index 021bc66c..930f0ad1 100644
--- a/src/lang/en.js
+++ b/src/lang/en.js
@@ -22,6 +22,7 @@ export default {
     componentMixin: 'Mixin',
     backToTop: 'BackToTop',
     dragDialog: 'Drag Dialog',
+    dragSelect: 'Drag Select',
     dragKanban: 'Drag Kanban',
     charts: 'Charts',
     keyboardChart: 'Keyboard Chart',
diff --git a/src/lang/es.js b/src/lang/es.js
index 19171904..f16044c4 100755
--- a/src/lang/es.js
+++ b/src/lang/es.js
@@ -22,6 +22,7 @@ export default {
     componentMixin: 'Mixin',
     backToTop: 'Ir arriba',
     dragDialog: 'Drag Dialog',
+    dragSelect: 'Drag Select',
     dragKanban: 'Drag Kanban',
     charts: 'Gráficos',
     keyboardChart: 'Keyboard Chart',
diff --git a/src/lang/zh.js b/src/lang/zh.js
index 9da9e9e4..46e96ccf 100644
--- a/src/lang/zh.js
+++ b/src/lang/zh.js
@@ -22,6 +22,7 @@ export default {
     componentMixin: '小组件',
     backToTop: '返回顶部',
     dragDialog: '拖拽 Dialog',
+    dragSelect: '拖拽 Select',
     dragKanban: '可拖拽看板',
     charts: '图表',
     keyboardChart: '键盘图表',
diff --git a/src/router/modules/components.js b/src/router/modules/components.js
index 56dad2b1..5fd9bd29 100644
--- a/src/router/modules/components.js
+++ b/src/router/modules/components.js
@@ -78,6 +78,12 @@ const componentsRouter = {
       name: 'DragDialogDemo',
       meta: { title: 'dragDialog' }
     },
+    {
+      path: 'drag-select',
+      component: () => import('@/views/components-demo/dragSelect'),
+      name: 'DragSelectDemo',
+      meta: { title: 'dragSelect' }
+    },
     {
       path: 'dnd-list',
       component: () => import('@/views/components-demo/dndList'),
diff --git a/src/views/components-demo/dragSelect.vue b/src/views/components-demo/dragSelect.vue
new file mode 100644
index 00000000..559e8a57
--- /dev/null
+++ b/src/views/components-demo/dragSelect.vue
@@ -0,0 +1,43 @@
+<template>
+  <div class="components-container">
+
+    <el-drag-select v-model="value" style="width:500px;" multiple placeholder="请选择">
+      <el-option v-for="item in options" :label="item.label" :value="item.value" :key="item.value" />
+    </el-drag-select>
+
+    <div style="margin-top:30px;">
+      <el-tag v-for="item of value" :key="item" style="margin-right:15px;">{{ item }}</el-tag>
+    </div>
+
+  </div>
+</template>
+
+<script>
+import ElDragSelect from '@/components/DragSelect' // base on element-ui
+
+export default {
+  name: 'DragSelectDemo',
+  components: { ElDragSelect },
+  data() {
+    return {
+      value: ['Apple', 'Banana', 'Orange'],
+      options: [{
+        value: 'Apple',
+        label: 'Apple'
+      }, {
+        value: 'Banana',
+        label: 'Banana'
+      }, {
+        value: 'Orange',
+        label: 'Orange'
+      }, {
+        value: 'Pear',
+        label: 'Pear'
+      }, {
+        value: 'Strawberry',
+        label: 'Strawberry'
+      }]
+    }
+  }
+}
+</script>