craftJS—拖拽式js框架

craft.js的一个记录，体验拖拽式生成网站，写一个简单的demo

1、craft简介

Craft.js通过模块化页面编辑器的构建模块来解决此问题。它提供了拖放系统，并处理了应呈现，更新和移动用户组件的方式。

官网：https://craft.js.org/

2、demo简介

由于craft.js目前才0.1.0-beta.17版本，国内没啥资料，记录一下简单demo的实现，可以快速入门

demo简单展示

3、创建项目

项目是使用react，UI框架官方推荐的是material-ui,但是我这里用的是ant design

npx create-react-app mydemo

直接放项目依赖，可能后续版本不一致

"dependencies": {
   
  "@craftjs/core": "^0.1.0-beta.17",
  "@material-ui/core": "^4.11.4",
  "@testing-library/jest-dom": "^5.11.4",
  "@testing-library/react": "^11.1.0",
  "@testing-library/user-event": "^12.1.10",
  "antd": "^4.15.5",
  "material-ui-color-picker": "^3.5.1",
  "react": "^17.0.2",
  "react-contenteditable": "^3.3.5",
  "react-dom": "^17.0.2",
  "react-scripts": "4.0.3",
  "web-vitals": "^1.0.1"
}

把依赖性放到配置文件里面，安装就好了。

npm install

或者使用yarn，都一样

然后把src/app.js里面的都删掉

import './App.css';

function App() {
   
  return (
    <div className="App">
    </div>
  );
}

export default App;

然后引入需要的依赖

import React from 'react';
import {
    Row, Col } from 'antd';
import './App.css';
import {
    Editor, Frame, Element } from "@craftjs/core";

function App() {
   
  return (
    <div className="App">
      <Row>
        <Col span={
   16} className="leftBox">
        </Col>
        <Col span={
   8} className="toolBox">
          <div