使用vue draggable报错[Vue warn]: <transition-group> children must be keyed:
Vue.Draggable
SortableJS/Vue.Draggable: Vue.Draggable 是 Sortable.js 的 Vue.js 封装组件,提供了拖放排序功能,可以在 Vue 应用中轻松实现列表元素的可拖拽重排。
项目地址:https://gitcode.com/gh_mirrors/vu/Vue.Draggable

·
贴个vue draggable中文文档:vue.draggable中文文档 - itxst.com
最近使用vue draggable时,想在推拽的组件里添加其它不能被拖拽的元素,因此使用了handle属性。结果报错,导致新增的元素并没有展示出来。
解决办法:在该元素的父级绑定key
以下为记录过程,以官方文档示例代码为例,示例代码部分如下:
<div class="itxst">
<div>鼠标移动到加号上面才允许拖动</div>
<div class="col">
<draggable v-model="arr1" handle=".mover" :disabled="disabled" animation="300" @start="onStart" @end="onEnd">
<transition-group>
<div class="item" v-for="item in arr1" :key="item.id"><span class="mover">+</span>{{item.name}}</div>
</transition-group>
</draggable>
</div>
</div>
</div>
图片效果:(可以点击+号正常拖拽。)
当添加一个不可拖拽的元素放在最后时,错误代码如下展示:
<div class="itxst">
<div>鼠标移动到加号上面才允许拖动</div>
<div class="col">
<draggable v-model="arr1" handle=".mover" :disabled="disabled" animation="300" @start="onStart" @end="onEnd">
<transition-group>
<div class="item" v-for="item in arr1" :key="item.id"><span class="mover">+</span>{{item.name}}</div>
<!--添加一个不可拖拽的元素-->
<div class="item item1" style="background: pink;">这里是不能被拖动的容器</div>
</transition-group>
</draggable>
</div>
</div>
</div>
然后会出现报错:[Vue warn]: <transition-group> children must be keyed:并且该元素未渲染到页面上,虽然不影响拖拽的功能。
解决办法:在该元素父级绑定key,代码如下
<div class="itxst">
<div>鼠标移动到加号上面才允许拖动</div>
<div class="col">
<draggable v-model="arr1" handle=".mover" :disabled="disabled" animation="300" @start="onStart" @end="onEnd">
<transition-group>
<div class="item" v-for="item in arr1" :key="item.id"><span class="mover">+</span>{{item.name}}</div>
<!--添加一个不可拖拽的元素-->
<!--key值请根据自己需要定义-->
<div class="item item1" key="noDraggable" style="background: pink;">这里是不能被拖动的容器</div>
</transition-group>
</draggable>
</div>
</div>
</div>
效果图片如下:(只有class="mover"的元素才可被拖拽)
另外我查了一下绑定数组的方式的区别,一个是v-model绑定,一个是:list="list"绑定,没发现说v-model绑定的数据在拖拽时只做了表象拖拽,没做数据的顺序拖拽。我体感两个效果是一样的。
完整演示代码如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>vue.draggable handle例子</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no, minimal-ui">
<script src="https://www.itxst.com/package/vue/vue.min.js"></script>
<script src="https://www.itxst.com/package/sortable/Sortable.min.js"></script>
<script src="https://www.itxst.com/package/vuedraggable/vuedraggable.umd.min.js"></script>
<style>
/*定义要拖拽元素的样式*/
.itxst {
margin: 10px;
}
.col {
width: 80%;
flex: 1;
padding: 10px;
border: solid 1px #eee;
border-radius: 5px;
float: left;
}
.col + .col {
margin-left: 10px;
}
.item {
padding: 6px 12px;
margin: 0px 10px 0px 10px;
border: solid 1px #eee;
background-color: #f1f1f1;
}
.item + .item {
border-top: none;
margin-top: 6px;
}
.mover {
background-color: #fdfdfd;
cursor: move;
padding:3px 6px;
}
</style>
</head>
<body style="padding:10px;">
<div id="app">
<!--使用draggable组件-->
<div class="itxst">
<div>鼠标移动到加号上面才允许拖动</div>
<div class="col">
<draggable handle=".mover" filter=".item1" v-model="arr1" :disabled="disabled" animation="300" @start="onStart" @end="onEnd">
<transition-group>
<div class="item" v-for="item in arr1" :key="item.id"><span class="mover">+</span>{{item.name}}</div>
<div class="item item1" key="noDraggable" style="background: pink;">这里是不能被拖动的容器</div>
</transition-group>
</draggable>
</div>
</div>
<p></p>
<p></p>
<p></p>
<p></p>
<p>展示数据变化:</p>
<div>
<div v-for="(item, index) in arr1" :key="item.id">{{item.name}}</div>
</div>
</div>
<script>
// debugger;
Vue.component('vuedraggable', window.vuedraggable.name)
var app = new Vue({
el: '#app',
components: {
vuedraggable,
},
data() {
return {
disabled: false,
//定义要被拖拽对象的数组
arr1: [
{ id: 1, name: 'www.itxst.com' },
{ id: 2, name: 'www.jd.com' },
{ id: 3, name: 'www.baidu.com' },
{ id: 4, name: 'www.taobao.com' }
]
};
},
methods: {
//设置禁止拖拽
setJY() {
this.disabled = true;
},
//设置启用拖拽
setQY() {
this.disabled = false;
},
onStart() {
this.drag = true;
},
//开始拖拽事件
onStart() {
this.drag = true;
},
//拖拽结束事件
onEnd() {
this.drag = false;
},
},
});
</script>




SortableJS/Vue.Draggable: Vue.Draggable 是 Sortable.js 的 Vue.js 封装组件,提供了拖放排序功能,可以在 Vue 应用中轻松实现列表元素的可拖拽重排。
最近提交(Master分支:6 个月前 )
431db153 - 2 年前
017ab498 - 3 年前
更多推荐
所有评论(0)