低代码开发之vue.draggable的使用（初阶：组件化拖拽生成简单页面）

效果展示

vue.draggable 安装 && 使用

//依赖下载npm i -S vuedraggable 或 yarn add vuedraggable

//导入draggable组件 import draggable from 'vuedraggable' 

 //注册draggable组件 components: { draggable },

          {{item.name}}    

• vue.draggable 相关属性

• 事件

  Demo完整代码

  业务组件{{ d.name }}保存配置页面内容区{{ item.name }}✖import draggable from "vuedraggable";export default {name: "PageEdit",components: {draggable},data() {return {dragOptions: {animation: 500,filter: ".disabled" //class为disabled时不可拖拽},componentsList: [{ type: "top", name: "信息条组件" },{ type: "income", name: "收益指标" },{ type: "electricity", name: "电量指标" },{ type: "comprehensive", name: "系统效率" },{ type: "warning", name: "告警指标" }],contentList: [{ type: "top", name: "信息条组件" }]};},watch: {},created() {if (JSON.parse(localStorage.getItem("contentList"))) {this.contentList = JSON.parse(localStorage.getItem("contentList"));}},methods: {toChange(e) {console.log(e);if (e.added) {console.log(this.contentList);}},del(idx) {this.contentList.splice(idx, 1);},save() {localStorage.setItem("contentList", JSON.stringify(this.contentList));this.$message.success("保存成功");}}};.page {&-edit {padding: 16px;display: flex;overflow: hidden;.title-bar {padding: 12px;font-size: 18px;font-weight: bold;background: #091d48;margin-bottom: 16px;}.left-components {width: 15%;height: calc(100vh - 100px);border: solid 1px #4d617f;overflow: auto;.li {background: #4d617f;display: flex;align-items: center;justify-content: center;margin: 10px 10px;padding: 12px 0;}.save {position: absolute;top: 25px;right: 30px;z-index: 999;}}.right-content {width: 85%;height: calc(100vh - 100px);border: solid 1px #4d617f;overflow: hidden;}.content {width: 100%;height: calc(100vh - 100px);overflow-y: auto;.item {height: 80px;background: #4d617f;margin: 0 12px 12px 12px;padding: 12px;position: relative;}}.delbtn {position: absolute;right: 4px;top: 0px;font-size: 12px;line-height: 24px;cursor: pointer;}}}

  更多详见draggable官网=>https://www.itxst.com/vue-draggable/tutorial.html