vue拖拽插件Draggable笔记
vue拖放插件 Vue.Draggable
Vue.Draggable:https://github.com/SortableJS/Vue.Draggable
npm i -S vuedraggable
demo:
<template>
<div>
<draggable class="list" @end="end" animation="200">
<div class="item" v-for="d in myList" :key="d._id">{{d.name}}</div>
</draggable>
</div>
</template>
<script>
import draggable from "vuedraggable";
export default {
components: {
draggable,
},
data() {
return {
myList: [
{ name: "苹果", id: 1 },
{ name: "葡萄", id: 2 },
{ name: "西瓜", id: 3 },
],
};
},
methods: {
end(e) {
console.log("e", e);
console.log("this.myList", this.myList);
},
},
};
</script>
<style lang="less" scoped>
.list {
display: flex;
flex-wrap: wrap;
padding: 30px 0;
background: rgb(0, 115, 160);
}
.item {
width: 50px;
height: 50px;
line-height: 50px;
border: 1px solid #000;
margin: 10px;
background: rgb(0, 0, 0);
color: #ffffff;
text-align: center;
}
</style>
属性
animation
,拖拽过渡动画时间。
filter
,禁止拖拽的元素类名。
<draggable class="list" filter=".undraggable" :group="{name:'people',pull:true,put:true}" @end="end" animation="200">
<div class="item" :class="{'undraggable':d.ban}" v-for="d in myList" :key="d._id">{{d.name}}</div>
</draggable>
myList: [
{ name: "苹果", id: 1 },
{ name: "葡萄", id: 2,ban:true},
{ name: "西瓜", id: 3 },
]
类名为undraggable
的元素禁止拖动。
事件
start, add, remove, update, end, choose, unchoose, sort, filter, clone,change。
@start
,拖拽开始。
@end
,拖拽结束事件。
...
vuex数据绑定
<draggable class="list" v-model="myList">
<div class="item" v-for="d in myList" :key="d.id">{{d.name}}</div>
</draggable>
computed: {
myList: {
get() {
return this.$store.getters["Home/getMyList"];
},
set(value) {
this.$store.commit("Home/updateMyList", value);
},
},
}
group 多列拖拽
在两个draggable
上设置group="shop"
,两组之间数据可以互相拖拽。
<!-- shopList -->
<draggable class="list" v-model="shopList" group="shop" :clone="clone">
<div class="item" v-for="d in shopList" :key="d.id">{{d.name}}</div>
</draggable>
<!-- myList -->
<draggable class="list myList" v-model="myList" group="shop" animation="200">
<div class="item" v-for="d in myList" :key="d.id">{{d.name}}</div>
</draggable>
group 属性
name
,组名
put
,是否接收其他列拖进来的数据,true:接收,false:不接收。
pull
,向其他列拖拽数据,true:本列会减少一个数据,对方列表增加一个数据。clone:本列不减少数据,对方列表增加一个数据。
<!-- shopList -->
<draggable class="list" v-model="shopList" :group="{name:'people',pull:'clone',put:false}" @clone="onClone">
<div class="item" v-for="d in shopList" :key="d.id">{{d.name}}</div>
</draggable>
<!-- myList -->
<draggable class="list myList" v-model="myList" :group="{name:'people',pull:true,put:true}" animation="200">
<div class="item" v-for="d in myList" :key="d.id">{{d.name}}</div>
</draggable>
如果有shopList设置了pull:"clone"
,那么shopList的数据不会改变,myList就可能收到重复的数据,当数据id相同时,会报错:
Duplicate keys detected: '8'. This may cause an update error.
解决方法1,在shopList的draggable上添加@clone="onClone"
,在拖拽到myList前处理输出的数据。
methods: {
onClone(n) {
return {
_id: new Date().valueOf(), // 返回一个不会重复的_id
...n,
};
},
}
并且,myList的数据列表使用:key="d._id"
。
<div class="item" v-for="d in myList" :key="d._id">{{d.name}}</div>
解决方法2,使用index。
<div class="item" v-for="(d,index) in myList" :key="index">{{d.name}}</div>
转载请注明来源:《 vue拖拽插件Draggable笔记》- rojerYong's Blog
文章链接:https://www.eoway.cn /article/1599818925.html如果此文摘取了你的原创,请联系本站管理员,将对此文修改、删除处理。
--END--
推荐
- 微信小程序打包,主包和分包都小于2m,却上传失败
- 微信公众号网页,微信jssdk需要刷新页面才可以使用
- uniapp 微信小程序背景音频播放 uni.getBackgroundAudioManager()
- uniapp 苹果授权登录
- uniapp app 跳转到微信小程序
- js常用方法
- css 变量
- uniapp 微信公众号网页 打开小程序
- 小程序分享到朋友圈时设置path的query参数,判断用户是否通过朋友圈进入小程序
- uniapp解决原生组件层级过高覆盖页面组件的问题
- js判断是否ie浏览器、ie浏览器版本
- uniapp 设置 APP 首次打开时显示“用户协议和隐私政策”弹框
- uniapp,app端打开第三方应用(高德地图、百度地图、腾讯地图,apple地图进行导航)
- uniapp,ios打开apple地图显示自定义地点信息
- 微信小程序通过map组件获取中心点高精度经纬度以及解决ios系统map组件moveToLocation无效问题
- web性能优化,使用preload和prefetch预加载资源