vuedraggable插件使用---小心得(欢迎广大网友补充)
vue
vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架,具有简洁的语法和丰富的组件库,可以用于开发单页面应用程序和多页面应用程序。
项目地址:https://gitcode.com/gh_mirrors/vu/vue
免费下载资源
·
1.最近有个需求是
a)左边菜单栏的菜单项拖动到右边的容器中;
b)左边的菜单栏的内容不变
c)拖动的过程中默认的影子单元来模拟被拖动单元换成固定的图片
综上,上网找了很多有关的vue拖拽组件,其中发现vuedraggable组件比较符合需求。
2.官网地址:https://www.npmjs.com/package/vuedraggable 发现功能确实强大,然后就着手开始啦。
3.左容器和右容器能相通拖动需要进行分组-----组别为同一组别即可,我的配置下图所示(在此要感谢这个csdn
Clew123 的网友 https://blog.csdn.net/zjiang1994/article/details/79809687写了很多基础的内容配置,避免走了很多弯道)
4.左边的配置项比右边多了一个ghostClass目的是为了实现如下图中红色框标注的效果(此处还有个小bug就是后面那个默认的投影内容不知道怎么去除)
5.dragOptions中sort 参数和group参数中pull和put的设置目的是为了实现左边拖动的时候内容顺序不改变,如下图所示
⚠️⚠️⚠️ 从0到1的基础内容可以看官网(https://www.npmjs.com/package/vuedraggable)或者Clew123网友的站 ( https://blog.csdn.net/zjiang1994/article/details/79809687)
这么多朋友要代码 上图中的逻辑内容设计较多 所以我就直接写一个简单的demo效果如下
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">
<img src="http://oss.shangmian.xin/ciBm3U1544694909000?imageslim">
{{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">
<img src="http://oss.shangmian.xin/ciBm3U1544694909000?imageslim">
{{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{
width: 300px;
border: 1px solid #ddd;
text-align: center;
margin-right: 50px;
>div{
padding:10px;
border-bottom:1px dashed #ddd;
img{
width: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">
<img src="http://oss.shangmian.xin/ciBm3U1544694909000?imageslim">
{{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">
<img src="http://oss.shangmian.xin/ciBm3U1544694909000?imageslim">
{{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>
GitHub 加速计划 / vu / vue
207.53 K
33.66 K
下载
vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架,具有简洁的语法和丰富的组件库,可以用于开发单页面应用程序和多页面应用程序。
最近提交(Master分支:1 个月前 )
73486cb5
* chore: fix link broken
Signed-off-by: snoppy <michaleli@foxmail.com>
* Update packages/template-compiler/README.md [skip ci]
---------
Signed-off-by: snoppy <michaleli@foxmail.com>
Co-authored-by: Eduardo San Martin Morote <posva@users.noreply.github.com> 3 个月前
e428d891
Updated Browser Compatibility reference. The previous currently returns HTTP 404. 4 个月前
更多推荐
已为社区贡献1条内容
所有评论(0)