持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第22天，点击查看活动详情

写在前面

随着数字孪生相关项目的推进，在市场情绪的推动下，鼓吹着数字孪生相关概念的许多公司纷纷想要入场分一杯羹，当然，大部分的炒数字孪生概念的公司，都是停留在二维相关的展示，所谓数字孪生，不过“新瓶旧酒”罢了，那么眼看着没什么可炒了，该咋办了，许多公司开始给它增加搭档"炒CP"，该找谁呢，这个时候“低代码”被寄予厚望，之所以数字孪生和低代码能够被捆绑“炒CP”，主要是对于二维的数字孪生，涉及到的主要是表格展示类，刚好避开了低代码开发平台对于复杂数据逻辑支持的缺陷，因此他俩可谓是天生的完美“CP”，说到这里，作为爱折腾的程序员本猿猴，那我们是不是也应该整起来，看看到底咋样呢？

项目初探

首先，为了整出这个“测试版”低代码平台，我们需要先了解一下这种二维数字孪生项目的主要展示形式，也就是界面的排版大致是咋样的，然后根据项目排版，整出一套通用的排版以适应项目的相关形态。某度搜索相关关键词，随便拿几张图来做个简单了解，如下

src=http___img2018.cnblogs.com_blog_1725277_201907_1725277-20190719150804240-2078405946.png&refer=http___img2018.cnblogs.webp

src=http___pic1.zhimg.com_v2-ac6458b9f8e4ec61f5ecaad05ae722ea_r.jpg_source=1940ef5c&refer=http___pic1.zhimg.webp

u=3472730224,583773621&fm=253&fmt=auto&app=120&f=GIF.gif

从上面3张图可以看出来，主要是铺表格，对称铺满表格即可，那么作为“灵魂产品经理”的我，提炼出来的样板是咋样的呢，当当当当，如下，一个“写意”的轮廓就确定下来了，接下来我们就按照这个精简的图来做低代码的尝试。

微信截图_20220622211729.png

相关技术探索

所谓低代码，也就是要减少手动写代码的量，简单来说，也就是希望实现的是图形化界面配置项目，那么图形化配置界面该具备哪些功能呢，首先想到的应该就是拖拽了吧，对于人感官来说，拖拽编辑应该是最贴近人操作意愿的方式了，那么接下来我们就来对拖拽相关技术进行简单的测试。

Vue 原生 draggable

可能平时许多业务中，都不会有太多机会接触到拖动，可能对于 Vue这个属性大家都比较陌生，大概介绍下，draggable 是 Vue 自带的一个属性值，当将某个元素的 deaggable 设置为 true 时，则该元素开启拖动效果，而当开启了 draggable 之后，我们就可以通过监听相关事件来完成我们想要的动作。

组件添加

完成了上面的步骤后，我们就能够对拖动的相关状态进行控制了，接下来就是最后一步，将我们拖动到目标位置的组件渲染到该位置上。代码演示如下

<template>
  <div class="drag-container" >
    <div class="slider">
      <div class="cpn" draggable="true" @dragstart="ondragstart" id="CPN1">
        <CPN1 />
      </div>
      <div class="cpn" draggable="true" @dragstart="ondragstart" id="CPN2">
        <CPN2 />
      </div>
    </div>
    <div class="ctn-box">
      <div class="inner-box" @dragover.prevent="" @drop.stop="ondrop" id="ctn1">
        <component :is="ctn1" />
      </div>
      <div class="inner-box" @dragover.prevent="" @drop.stop="ondrop" id="ctn2">
        <component :is="ctn2" />
      </div>
    </div>
  </div>
</template>

<script>
import CPN1 from '@/components/CPN1'
import CPN2 from '@/components/CPN2'
export default {
  components: {
    CPN1,
    CPN2
  },
  data(){
    return {
      ctn1: '',
      ctn2: '',
      currentCpn: ''
    }
  },
  methods: {
    ondragstart(e){
      const id = e.target.getAttribute('id')
      console.log('ondragstart', id)
      this.currentCpn = id
    },
    ondrop(e){
      const id = e.target.getAttribute('id')
      console.log('drop', id)
      this[id] = this.currentCpn
    }
  },
}
</script>