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>
项目中options配置项的说明：
:options="{group:{name: falgs,pull:'clone'},filter: '.undraggable', sort: false}"1、要实现两个组件之间的拖拽，需要两个组件的options的 group 名称保持一致！ group：’111’或者group:{name:’111′}，写法都可以。
2、group里面的 pull:’clone’ 表示克隆拖拽的项，这样配置之后，会保留被拖拽的项。
3、filter: ‘.undraggable’ , .undraggable 在本案例中，实际上是取得html的动态样式 undraggable，用来单独配置某个组件是否可以重复被拖拽，可以用逗号隔开配置多个
在本案例中，拖拽一次，就被禁止再次拖拽。
4、sort，值为true或者false，是否允许拖拽排序。
5、disabled，值为true或者false，是否允许其他项目被拖拽到本组件中，false同时也禁止了本组件的拖拽功能。
——————————————————————————–
下面是比较全面的配置项API options说明，以及事件说明：
group参数说明：
string：命名，个人建议用元素id就行,用处是为了设置可以拖放容器时使用，在array中的put的设置中再做介绍；
object：{name,pull,put}
name：同string的方法，
pull：pull用来定义从这个列表容器移动出去的设置，true/false/’clone’/function
true:列表容器内的列表单元可以被移出；
false：列表容器内的列表单元不可以被移出；
