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