利用Vue.draggable 實現新增常用功能
阿新 • • 發佈:2019-01-10
具體需要實現,底部是所有all,上面是常用always,
1.常用間可以互相拖拽排序,常用不能拖到底部all
2.底部all間不能相互拖動,只可以拖動到常用,且拖動過後不可在拖動
效果:
希望對各位做類似功能的有所幫助,
demo程式碼:
<template> <div class="dndList"> <div class="dndList-list"> <h3>常用</h3> <draggable :list="list1" :options="{group:'article', disabled: disabled}" @start="start22" @end="end22" class="dragArea11" style="height: 100px"> <div v-for="(element, index) in list1" :key="element.id" class="list-complete-item"> <div class="list-complete-item-handle">{{element.name}}</div> <div> <i class="el-icon-delete" @click="handleDel(index, element.id)"></i> </div> </div> </draggable> </div> <div style="width: 100%; height: 10px; background-color: #bfbfbf"></div> <div class="dndList-list"> <h3>所有</h3> <draggable :list="list2" :options="{group:{name: falgs,pull:'clone'},filter: '.undraggable', sort: false}" @end="end" class="dragArea"> <div v-for="element in list2" :key="element.id" :class="{undraggable : element.flag}" class="list-complete-item"> <div class="list-complete-item-handle2"> {{element.name}}</div> </div> </draggable> </div> </div> </template> <script> import draggable from 'vuedraggable' export default { name: 'DndList', components: { draggable }, watch: { }, data () { return { falgs: 'article', disabled: false, list1: [], list2: [{id: 1, name: 1}, {id: 2, name: 2}, {id: 3, name: 3}, {id: 4, name: 4}, {id: 5, name: 5}, {id: 6, name: 6}, {id: 7, name: 7}, {id: 8, name: 8}, {id: 9, name: 9}, {id: 10, name: 10}] } }, computed: { }, methods: { end (ev) { if (ev.to.className === 'dragArea11') { this.$set(this.list2[ev.oldIndex], 'flag', true) } }, start22 (event) { this.falgs = '222222' }, end22 (ev) { this.falgs = 'article' }, handleDel (index, id) { this.list1.splice(index, 1) let q = this.list2.find((value, index, arr) => { return value.id === id }) this.$set(q, 'flag', false) } } } </script> <style rel="stylesheet/scss" lang="scss" scoped> .list-complete-item { cursor: pointer; position: relative; font-size: 14px; padding: 5px 12px; display: inline-block; margin-right: 20px; width: 50px; height: 50px; border: 1px solid #bfcbd9; transition: all 1s; } .list-complete-item.sortable-chosen { background: #4AB7BD; } .list-complete-item.sortable-ghost { background: #30B08F; } .undraggable { background-color: red; } .list-complete-enter, .list-complete-leave-active { opacity: 0; } </style>