i

src/components/DragSelect/index.vue

@@ -0,0 +1,73 @@
+<template>
+  <el-select v-model="selectVal" :v-bind="$attrs" multiple>
+    <el-option v-for="item in options" :label="item.label" :value="item.value" :key="item.value" />
+  </el-select>
+</template>
+
+<script>
+import Sortable from 'sortablejs'
+
+export default {
+  name: 'DragSelect',
+  props: {
+    value: {
+      type: Array,
+      required: true
+    },
+    options: {
+      type: Array,
+      required: true
+    }
+  },
+  data() {
+    return {
+
+    }
+  },
+  computed: {
+    selectVal: {
+      get() {
+        console.log([...this.value])
+        return [...this.value]
+      },
+      set() {
+
+      }
+    }
+  },
+  watch: {
+    value(val) {
+      console.log(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 => {
+          console.log(evt)
+          const targetRow = this.value.splice(evt.oldIndex, 1)[0]
+          this.value.splice(evt.newIndex, 0, targetRow)
+        }
+      })
+    }
+  }
+}
+</script>
+
+<style>
+.sortable-ghost{
+  opacity: .8;
+  color: #fff!important;
+  background: #42b983!important;
+}
+</style>

src/directive/el-dragSelect/drag.js

@@ -0,0 +1,30 @@
+// import Sortable from 'sortablejs'
+
+// function setSort(el, binding) {
+//   // import('sortablejs').then(excel => {
+
+//   // })
+//   // import
+//   const d = el.querySelectorAll('.el-select__tags > span')[0]
+//   const sortable = Sortable.create(d, {
+//     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 => {
+//       console.log(binding)
+//       // console.log(evt)
+//       // const targetRow = this.value.splice(evt.oldIndex, 1)[0]
+//       // this.value.splice(evt.newIndex, 0, targetRow)
+//     }
+//   })
+// }
+
+// export default{
+//   bind(el, binding, vnode) {
+//     console.log(binding)
+//     setSort(el, binding)
+//   }
+// }

src/directive/el-dragSelect/index.js

@@ -0,0 +1,13 @@
+import drag from './drag'
+
+const install = function(Vue) {
+  Vue.directive('el-drag-select', drag)
+}
+
+if (window.Vue) {
+  window['el-drag-select'] = drag
+  Vue.use(install); // eslint-disable-line
+}
+
+drag.install = install
+export default drag

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/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', noCache: true }
+    },
     {
       path: 'dnd-list',
       component: () => import('@/views/components-demo/dndList'),

src/views/components-demo/dragSelect.vue

@@ -0,0 +1,68 @@
+<template>
+  <div class="components-container">
+    <el-select v-el-drag-select v-model="value" multiple placeholder="请选择">
+      <el-option v-for="item in options" :label="item.label" :value="item.value" :key="item.value"/>
+    </el-select>
+    {{ value }}
+  </div>
+</template>
+
+<script>
+import Sortable from 'sortablejs'
+import elDragSelect from '@/directive/el-dragSelect' // base on element-ui
+
+export default {
+  name: 'DragSelectDemo',
+  directives: { elDragSelect },
+  data() {
+    return {
+      value: ['黄金糕', '双皮奶'],
+      options: [{
+        value: '黄金糕',
+        label: '黄金糕'
+      }, {
+        value: '双皮奶',
+        label: '双皮奶'
+      }, {
+        value: '蚵仔煎',
+        label: '蚵仔煎'
+      }, {
+        value: '龙须面',
+        label: '龙须面'
+      }, {
+        value: '北京烤鸭',
+        label: '北京烤鸭'
+      }]
+    }
+  },
+  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 => {
+          // console.log(evt)
+          const targetRow = this.value.splice(evt.oldIndex, 1)[0]
+          this.value.splice(evt.newIndex, 0, targetRow)
+        }
+      })
+    }
+  }
+}
+</script>
+
+<style>
+.sortable-ghost{
+  opacity: .8;
+  color: #fff!important;
+  background: #42b983!important;
+}
+</style>