vue-draggable中文文档
简单的遍历list列表拖拽
部分元素不可拖拽参考; 部分不可拖拽参考
ElementUI 实现Table组件实现拖拽效果
列表的拖拽功能:
一、下载依赖
npm i -S vuedraggable
二、页面使用
<template><div><vuedraggable class="wrapper" v-model="list"><transition-group><div v-for="item in list" :key="item.projectid" class="item"><p>{{item.name}}</p></div></transition-group></vuedraggable></div></template><script>import vuedraggable from "vuedraggable";export default {components: {vuedraggable },props: {},data() {return {list: [{name: "体型",projectid: 1,},{name: "屈臂悬垂",projectid: 2,},{name: "引体向上",projectid: 3,},],};},updated() {console.log(this.list);},
三、报错:Value and list props are mutually exclusive! Please set one or another.
这个原因是: