大体效果是这样得！
首先需要安装vuedraggable依赖包：
npm install vuedraggable --save
因为拖拽组件依赖sortablejs ，如果项目没有安装sortablejs ，可能需要安装一下
npminstall sortablejs--save
这里解释一下参数得： group
一种直接string:
string：命名，个人建议用元素id就行,用处是为了设置可以拖放容器时使用，在array中的put的设置中再做介绍；
另外可以传入对象：
object：{name,pull,put}
name：同string的方法，
pull：pull用来定义从这个列表容器移动出去的设置，true/false/'clone'/function true:列表容器内的列表单元可以被移出； false：列表容器内的列表单元不可以被移出；
'clone'：列表单元移出，移动的为该元素的副本； function：用来进行pull的函数判断，可以进行复杂逻辑，在函数中return false/true来判断是否移出；
put：put用来定义往这个列表容器放置列表单元的的设置，true/false/['foo','bar']/function true:列表容器可以从其他列表容器内放入列表单元； false：与true相反； ['foo','bar']：这个可以是一个字符串或者是字符串的数组，代表的是group配置项里定义的name值； function：用来进行put的函数判断，可以进行复杂逻辑，在函数中return false/true来判断是否放入；
其他参数说明
group: "name", // or { name: "...", pull: [true, false, clone], put: [true, false, array] }
sort：boolean 定义是否列表单元是否可以在列表容器内进行拖拽排序；
delay：number 定义鼠标选中列表单元可以开始拖动的延迟时间；
disabled：boolean 定义是否此sortable对象是否可用，为true时sortable对象不能拖放排序等功能，为false时为可以进行排序，相当于一个开关；
animation：number 单位：ms，定义排序动画的时间；
handle：selector 格式为简单css选择器的字符串，使列表单元中符合选择器的元素成为拖动的手柄，只有按住拖动手柄才能使列表单元进行拖动；
filter：selector 格式为简单css选择器的字符串，定义哪些列表单元不能进行拖放，可设置为多个选择器，中间用“，”分隔；
draggable：selector 格式为简单css选择器的字符串，定义哪些列表单元可以进行拖放 ghostClass：
selector 格式为简单css选择器的字符串，当拖动列表单元时会生成一个副本作为影子单元来模拟被拖动单元排序的情况，此配置项就是来给这个影子单元添加一个class，我们可以通过这种方式来给影子元素进行编辑样式；
chosenClass：selector 格式为简单css选择器的字符串，当选中列表单元时会给该单元增加一个class；
forceFallback：boolean 如果设置为true时，将不使用原生的html5的拖放，可以修改一些拖放中元素的样式等；
fallbackClass：string 当forceFallback设置为true时，拖放过程中鼠标附着单元的样式；
scroll：boolean 默认为true，当排序的容器是个可滚动的区域，拖放可以引起区域滚动 事件：
onChoose：function 列表单元被选中的回调函数
onStart：function 列表单元拖动开始的回调函数
onEnd：function 列表单元拖放结束后的回调函数
onAdd：function 列表单元添加到本列表容器的回调函数
onUpdate：function 列表单元在列表容器中的排序发生变化后的回调函数
onRemove：function 列表元素移到另一个列表容器的回调函数
onFilter：function 试图选中一个被filter过滤的列表单元的回调函数
onMove：function 当移动列表单元在一个列表容器中或者多个列表容器中的回调函数
onClone：function 当创建一个列表单元副本的时候的回调函数 事件对象： 事件对象在各个函数中略有不同，可通过输出对象查看对象的属性，
这里是代码，一直不会弄那种格式化得代码 见谅！
<template>
<div class="drag-box">
<div class="drag-leftbox">
<h3>所有</h3>
<draggable
:list="list2"
v-bind="getLeftOption()"
@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 class="drag-rightbox">
<h3>常用</h3>
<draggable
:list="list1"
v-bind="getRightOption()"
@start="startRight"
@end="endRight"
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>
</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: {
// 右侧表格设置
getRightOption () {
return { group: 'article', disabled: this.disabled }
},
startRight (event) {
this.falgs = '222222'
},
endRight (ev) {
this.falgs = 'article'
},
// 左侧列表设置
getLeftOption () {
return { group: { name: this.falgs, pull: 'clone' }, filter: '.undraggable', sort: false }
},
end (ev) {
if (ev.to.className === 'dragArea11') {
this.$set(this.list2[ev.oldIndex], 'flag', true)
}
},
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>
.drag-box {
display: flex;
flex-direction: row;
justify-content: flex-start;
}
.drag-rightbox, .drag-leftbox {
width: 48%;
margin: 1%;
border: 1px solid #eaeaea;
}
.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>
网友评论