1.左边数据不变 右边数据不能拖动到左边
代码如下:
<template>
<div class="dragDemo">
<!--列表1-->
<draggable class="list-group"
element="div"
v-model="listLeft"
:options="dragOptions1"
:move="onMove"
@start="isDragging=true"
@end="isDragging=false">
<div v-for="(item,key) in listLeft" :key="key">
{{item.name}}-{{item.value}}
</div>
</draggable>
<!--列表2-->
<draggable class="list-group"
element="div"
v-model="listRight"
:options="dragOptions2"
:move="onMove"
@start="isDragging=true"
@end="isDragging=false"
>
<div v-for="(item,key) in listRight" :key="key">
{{item.name}}-{{item.value}}
</div>
</draggable>
</div>
</template>
<script>
import draggable from "vuedraggable";
export default{
name:'dragDemo',
components:{
draggable
},
data(){
return{
isDragging:false,
listLeft:[{
name:'数据一',
value:'1'
},{
name:'数据二',
value:'2'
},{
name:'数据三',
value:'3'
},{
name:'数据四',
value:'4'
},{
name:'数据五',
value:'5'
}],
listRight:[]
}
},
computed: {
dragOptions1() {
return {
animation: 0,
group: {
name: "description",
pull: 'clone',
put: false
},
ghostClass: "ghost",
};
},
dragOptions2(){
return {
animation: 0,
group: "description",
};
}
},
methods:{
onMove({relatedContext, draggedContext}) {
const relatedElement = relatedContext.element;
const draggedElement = draggedContext.element;
return (
(!relatedElement || !relatedElement.fixed) && !draggedElement.fixed
);
},
}
}
</script>
<style scoped lang="scss" rel="stylesheet/scss">
.dragDemo{
margin-top:50px;
display: flex;
justify-content: center;
color: #555;
.list-group{
300px;
border: 1px solid #ddd;
text-align: center;
margin-right: 50px;
>div{
padding:10px;
border-bottom:1px dashed #ddd;
img{
25px;
height:25px;
vertical-align: middle;
padding-right:10px;
}
}
}
}
</style>
2.左边数据不变 右边数据可拖动到左边
<template>
<div class="dragDemo">
<!--列表1-->
<draggable class="list-group"
element="div"
v-model="listLeft"
:options="dragOptions1"
:move="onMove"
@start="isDragging=true"
@end="isDragging=false">
<div v-for="(item,key) in listLeft" :key="key">
{{item.name}}-{{item.value}}
</div>
</draggable>
<!--列表2-->
<draggable class="list-group"
element="div"
v-model="listRight"
:options="dragOptions2"
:move="onMove"
@start="rightStart"
@end="rightEnd"
>
<div v-for="(item,key) in listRight" :key="key">
{{item.name}}-{{item.value}}
</div>
</draggable>
</div>
</template>
<script>
import draggable from "vuedraggable";
export default{
name:'dragDemo',
components:{
draggable
},
data(){
return{
isDragging:false,
listLeft:[{
name:'数据一',
value:'1'
},{
name:'数据二',
value:'2'
},{
name:'数据三',
value:'3'
},{
name:'数据四',
value:'4'
},{
name:'数据五',
value:'5'
}],
listRight:[],
oldleftlist:[]
}
},
computed: {
dragOptions1() {
return {
animation: 0,
group: {
name: "description",
pull:'clone'
},
ghostClass: "ghost",
};
},
dragOptions2(){
return {
animation: 0,
group: "description",
};
}
},
methods:{
onMove({relatedContext, draggedContext}) {
const relatedElement = relatedContext.element;
const draggedElement = draggedContext.element;
return (
(!relatedElement || !relatedElement.fixed) && !draggedElement.fixed
);
},
rightStart(){
this.oldleftlist=this.listLeft.concat();
this.isDragging=true;
},
rightEnd(){
this.isDragging=false;
//左边数据不变
this.listLeft=this.oldleftlist.concat();
}
}
}
</script>