持续创作，加速成长！这是我参与「AdminJS · 6 月更文挑战」的第23天，点击查看活动详情
写在前面
上一篇 当数字孪生遇上低代码（一） 介绍了数字孪生与低代码这对“CP”的“千丝万缕”，也做了一小部分的相关技术分析，那么这一篇继续对相关技术进行探索
vuedraggable
在上一篇我们分析了如何利用 vue 原生的 draggable 实现拖拽放置组件的功能，而如果需要实现更加复杂的拖拽行为，例如拖拽变换顺序等，那么使用 vuedraggable 或许是更好的选择，那么接下来我们就一起来探索探索 vuedraggable
1、安装
npm i -S vuedraggable
2、引入组件
import draggable from 'vuedraggable'
3、使用组件
当我们将组件引入后，就可以在代码中直接使用组件 <vuedraggable>了，接下来我们来看看几个应用场景
排序
这个功能应该是 vuedraggable 被用得最多的一个应用场景了，通过它的封装，我们直接绑定一个数组，就可以很轻松实现拖动排序的效果，接下来看看代码演示
<template>
<div class="VDraggable-container">
<div class="box">
<draggable
v-model="list"
v-bind="draggableProps"
>
<div class="inner-box" v-for="item in list" :key="item">{{item}}</div>
</draggable>
</div>
</div>
</template>
<script>
import draggable from 'vuedraggable'
export default {
components: {
draggable
},
data() {
return {
list: [
'page1',
'page2',
'page3',
'page4',
'page5',
],
draggableProps: {
animation: 300,
}
}
},
}
</script>
通过演示动画我们可以看到，当拖动任何一个子组件时，其他组件都能自动排序，这是由于我们通过 v-model 给 <draggable> 绑定了数组 list ，当拖动子组件时，<draggable> 将会自动操作数组，以达到相应的效果。
当然，除了绑定了 v-model 实现排序，我们会可以给 <draggable>添加动画执行的时间，animation，用于控制排序动画，使得过程更加的自然
数组间移动
除了排序，其实vuedraggable还有个更加强大的功能，数组间移动，这个功能主要实现的效果是，能够让我们在两组组件间相互拖拽，也就是说原来属于组A的子组件，能够被拖动到组B中，组B中的子组件也能够被拖动到组A中，接下来看代码演示
<template>
<div class="VDraggable-container">
<div class="drag-box">
<draggable
v-model="list1"
v-bind="draggableProps"
>
<div class="inner-box" v-for="item in list1" :key="item">{{item}}</div>
</draggable>
</div>
<div class="drag-box">
<draggable
v-model="list2"
v-bind="draggableProps"
>
<div class="inner-box" v-for="item in list2" :key="item">{{item}}</div>
</draggable>
</div>
</div>
</template>
<script>
import draggable from 'vuedraggable'
export default {
components: {
draggable
},
data() {
return {
list1: [
'page1',
'page2',
'page3',
],
list2: [
'page3',
'page4',
'page5',
],
draggableProps: {
group: 'drag',
animation: 300,
}
}
},
}
</script>
这里需要注意的是，当我们需要在两个组间拖拽子组件时，我们需要将两个 draggable 绑定同一个 group 名称，这样我们就能够愉快地在俩组间拖动组件了
功能使用
当我们探索完 draggable 相关技术后，就可以将其引入到我们真正的低代码中来使用了，接下来看看成品中拖拽模块的 GIF 图展示
在第一张图我们可以看到，当我们从左边将组件拖拽到模板框中时，组件即可直接生成，完成了组件拖拽添加的功能，从第二张图可以看到当我们想要调整页面的顺序的时候，点击了编辑页面按钮，进入到编辑模块，通过拖动左边的页面栏就可以继续顺序调整，也可以通过拖动到右边的回收框，直接删除该页面，基本做到“所见即所得的”丝滑操作感受！！
总结
其实拖拽编辑功能的实现并不需要什么特别刁钻的的技术支撑，使用 Vue 原生的 draggable 属性或者基于vue 封装的库 vuedraggable 都能轻松完成，相比于其他的实现形式，拖拽编辑带来的操作体验很明显更加符合我们的操作意愿，所见即所得，能够让使用者感受到更高的把控感，随着相关技术的不断演进，越来越多的能人志士加入相关技术的研究，或许在不久的将来，拖拽编辑将会渗透到各个相关的应用平台，成为各个应用平台的标配操作。
拖拽编辑相关技术就探索到这里，接下来的将对低代码相关的其他技术进行探索，欢迎持续关注后续文章！！
往期好文推荐
面试官：了解低代码平台吗？（数字孪生低代码平台探索）（五）
面试官：了解低代码平台吗？（数字孪生低代码平台探索）（四）
面试官：了解低代码平台吗？（数字孪生低代码平台探索）（三）
面试官：了解低代码平台吗？（数字孪生低代码平台探索）（二）
面试官：了解低代码平台吗？（数字孪生低代码平台探索）（一）
面试官：说说从输入 URL 到页面显示到底经历了什么，体现一下你的知识广度
面试官：作为前端，服务器相关了解多少？
面试官：HTTPS 采用的是对称加密还是非对称加密？具体说说其加密过程
面试官：说说 Cookie 和 Token 的区别？
面试官：网络安全了解多少，简单说说？（一）
面试官：网络安全了解多少，简单说说？（二）
面试官：网络安全了解多少，简单说说？（三）
面试官：网络安全了解多少，简单说说？（四）
面试官：网络安全了解多少，简单说说？（五）
面试官：网络安全了解多少，简单说说？（六）
面试官：网络安全了解多少，简单说说？（七）
面试官：网络安全了解多少，简单说说？（八）
浅尝 | 从 0 到 1 Vue 组件库封装
面试官：这么简单的正则表达式都不会？
Webpack 打包类库踩坑
面试官：你就只会 npm run build 吗？（Webpack 配置 Vue+Ts）
面试官：连VuePress都没搭过还说开发过组件库？（VuePress 搭建）
面试官: 连 Vue 视图更新都不会写？（Vue视图更新原理【一】）
面试官: 能不能手写 Vue 响应式？（Vue2 响应式原理【完整版】）
面试官：能不能手写 Vue3 响应式（Vue3 原理解析之响应系统的实现）
JS 优雅之道（JS 代码优化小 Tip）
面试官：你真的会用 SVG 吗? (SVG 应用实战)
面试官：说一下这个Loading动画实现思路 (CSS3 实现 Loading 动画)
JS 扫盲题 ( 面试题梳理系列 （一）)
面试官：你确定你说的防抖不是节流吗？( 面试题梳理系列 （二）)
面试官：除了 HTTP，你还用过什么通信协议？(Websocket 在数字孪生中的应用)
面试官：你真的理解 Event Loop 吗?( JS 事件循环 )
面试官：v-for 中 key 为什么不能用 index，从原理层面聊聊？
面试官：vue-router 的 hash 与 history 哪个模式会刷新页面?
面试官：说说你平时用过的自适应方案（数字孪生可视化自适应方案）
面试官：说一下如何优化过渡动画（数字孪生可视化过渡动画）
写在最后
博主接下来将持续更新好文，欢迎关注博主哟！！
如果文章对您有帮助麻烦亲点赞、收藏 + 关注和博主一起成长哟！！❤️❤️❤️