feature: add drag select component (#1249)

Author: PanJiaChen

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

README.zh-CN.md

@@ -130,6 +130,7 @@
   - 头像上传
   - 返回顶部
   - 拖拽Dialog
+  - 拖拽Select
   - 拖拽看板
   - 列表拖拽
   - SplitPane

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>

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

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

src/lang/zh.js

@@ -22,6 +22,7 @@ export default {
     componentMixin: '小组件',
     backToTop: '返回顶部',
     dragDialog: '拖拽 Dialog',
+    dragSelect: '拖拽 Select',
     dragKanban: '可拖拽看板',
     charts: '图表',
     keyboardChart: '键盘图表',

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'),

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>