持续创作，加速成长！这是我参与「掘金日新计划 · 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>

GIF 2022-6-23 1-48-08.gif

通过演示动画我们可以看到，当拖动任何一个子组件时，其他组件都能自动排序，这是由于我们通过 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 名称，这样我们就能够愉快地在俩组间拖动组件了

GIF 2022-6-23 2-02-55.gif

功能使用

当我们探索完 draggable 相关技术后，就可以将其引入到我们真正的低代码中来使用了，接下来看看成品中拖拽模块的 GIF 图展示

GIF 2022-6-23 10-26-22.gif

GIF 2022-6-23 10-37-56.gif

在第一张图我们可以看到，当我们从左边将组件拖拽到模板框中时，组件即可直接生成，完成了组件拖拽添加的功能，从第二张图可以看到当我们想要调整页面的顺序的时候，点击了编辑页面按钮，进入到编辑模块，通过拖动左边的页面栏就可以继续顺序调整，也可以通过拖动到右边的回收框，直接删除该页面，基本做到“所见即所得的”丝滑操作感受！！

总结

其实拖拽编辑功能的实现并不需要什么特别刁钻的的技术支撑，使用 Vue 原生的 draggable 属性或者基于vue 封装的库 vuedraggable 都能轻松完成，相比于其他的实现形式，拖拽编辑带来的操作体验很明显更加符合我们的操作意愿，所见即所得，能够让使用者感受到更高的把控感，随着相关技术的不断演进，越来越多的能人志士加入相关技术的研究，或许在不久的将来，拖拽编辑将会渗透到各个相关的应用平台，成为各个应用平台的标配操作。

拖拽编辑相关技术就探索到这里，接下来的将对低代码相关的其他技术进行探索，欢迎持续关注后续文章！！