【实战】从零开始打造一个低代码平台——4、拖拽组件

---

前言

之前的几个章节，我们都还没有涉及到任何功能。从这章开始，我们要开始设计第一个功能——控件拖拽。作为一个低代码平台，拖拽控件是一个基本也是一个核心功能，所以今天的内容算是一道主菜。这一部分内容比较多，我们将拆成两个章节。

---

一、使用图标

低代码平台会重度使用很多图标，如何更好的使用图标也是提高效率的关键之一。
我们先来看看使用图标的几种方式。

1.1 image

直接使用图片<img>元素，这里不细述，因为不推荐。

1.2 Icon

用第三方的Icon组件，例如@ant-design/icons，里面有一些内置图标，也可以自定义图标。

yarn add @ant-design/icons

1.3 字体图标

把图标当成字体去使用，灵活度很高，易于定制。这也是我们将采用的方式。

1.3.1 从 iconfont 下载图标代码

把你的图标上传至 iconfont.cn，或者在iconfont.cn上选择允许公开自由使用的图标，然后下载代码。下载的.zip文件解压后，把里面的iconfont.css和iconfont.ttf文件拷贝到src/assets/font目录下。iconfont.css定义了图标（相当于字体）的className，例如我们的文件看起来是这样的：

@font-face {
  font-family: "iconfont"; /* Project id  */
  src: url('iconfont.ttf?t=1727933264729') format('truetype');
}

.iconfont {
  font-family: "iconfont" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon-anniu:before {
  content: "\e76a";
}

1.3.2 引入iconfont.css

在文件的入口App.tsx引入iconfont.css：

import "./styles/index.scss";
import "./assets/font/iconfont.css" // 新引入的样式

现在，我们引入了另一个样式文件，但这其实是图标文件，只不过通过样式的方式去使用。

二、添加第一个控件

定义好了图标资源，我们就可以使用它了。

2.1 引用图标

接下来，我们用新引入的图标文件来改造WidgetBar。

interface WidgetBarProps {
  className?: string;
}

export const WidgetBar: React.FC<WidgetBarProps> = ({ className }) => {
  return (
    <div
      className={`absolute left-3 top-3 w-12 h-80 bg-gray-700 rounded-md ${
        className ?? ""
      }`}
    >
      <i className='iconfont icon-anniu' />
    </div>
  );
};

<i className='iconfont icon-anniu' />这行就添加了一个Button控件，如下图所示。

看起来丑了点，但图标引用没问题，我们再调整一下样式让它看起来美观点。

2.2 优化图标样式

用样式的方式使用图标有什么好处呢？那就是我们可以用样式的方式去处理图标，例如对齐，大小，颜色等等。

调整完WidgetBar是这样的：

interface WidgetBarProps {
  className?: string;
}

export const WidgetBar: React.FC<WidgetBarProps> = ({ className }) => {
  return (
    <div
      className={`absolute left-3 top-3 w-12 h-80 bg-gray-700 rounded-md flex justify-center items-start p-2 ${
        className ?? ""
      }`}
    >
      <i className='iconfont icon-anniu hover:text-gray-500' />
    </div>
  );
};

看一下效果：

现在图标居中对齐了，当把鼠标移动到图标上面，图标还会有颜色变化。而这些都是通过我们熟悉的css属性去调整的。
这个添加的图标就代表了一个可以拖拽的控件。

三、拖拽控件

设计好了我们的控件，接下来我们要实现，鼠标拖拽控件到Canvas上，然后生成一个Button组件。被拖拽的是source元素，拖拽释放到的区域（Canvas）是target元素。要实现拖拽控件，我们需要在source元素上指定draggable，同时根据需要实现onDragStart，onDrag和onDragEnd，分别表示“开始拖拽”，“拖拽过程中”和“拖拽结束”。另外，在target元素上要实现onDragOver和onDrop，其中onDragOver要防止默认行为，否则onDrop无法被触发。

3.1 为WidgetBar添加事件

为WidgetBar添加 onDragStart，onDrag和onDragEnd。

interface WidgetBarProps {
  className?: string;
}

export const WidgetBar: React.FC<WidgetBarProps> = ({ className }) => {
  return (
    <div
      className={`absolute left-3 top-3 w-12 h-80 bg-gray-700 rounded-md flex justify-center items-start p-2 ${
        className ?? ""
      }`}
    >
      <i
        className="iconfont icon-anniu hover:text-gray-500"
        draggable
        onDragStart={() => {
          console.log("drag start");
        }}
        onDrag={() => {
          // console.log("drag");
        }}
        onDragEnd={() => {
          console.log("drag end");
        }}
      />
    </div>
  );
};

3.2 为Canvas添加事件

为Canvas添加onDragOver和onDrop。

interface CanvasProps {
  className?: string;
}

export const Canvas: React.FC<CanvasProps> = ({ className }) => {
  return (
    <div
      className={className ?? ""}
      onDragOver={(e) => {
        console.log("onDragOver");
        e.preventDefault();
      }}
      onDrop={() => {
        console.log("onDrop");
      }}
    ></div>
  );
};

壳子套好了，触发拖拽时在控制台也可以看到对应的LOG，一切如我们所料。

---

总结

这一章我们介绍了使用图标的方式，推荐用样式的方式去处理图标，如此我们可以用上样式相关的工具，高度灵活易于定制。另外，我们还把拖拽的相关事件定义好了，实现了一个壳子，下一章我们将继续完成整个功能。