自定义布局

拖拽功能实现

主要分为两个布局区域：表单项列表区域和自定义布局区域。拖拽功能的目标是将拖拽的表单项信息写入到自定义布局的单元格中。两个区域的组件可以独立开发，但需要两部分的组件共同完成整个拖拽过程，所以我们需要做一些约定来保证拖拽功能的实现。

• 表单项列表

在拖拽的开始阶段将拖拽的表单项信息写入到 event 事件的 dataTransfer 数据中，保证自定义布局组件能获取到当前拖拽的表单项信息。

const handleDragStart = (event: any) => {
  // 定义当前拖拽的表单项信息
  const field = {
    ...item,
    fullId: `${
      parent ? `${parent.fieldName}.${item.fieldName}` : item.fieldName
    }`,
  };
  // 将表单项信息写入到event事件数据中
  event.dataTransfer.setData('field', JSON.stringify(field));
};

表单项数据中额外加了 valueExp 字段，表示包含父表单项在内的完整的表单名称路径

• 自定义布局组件

监听onDragOver事件，判断当前鼠标的悬浮位置是否支持释放鼠标

const handleTdDragOver = (event: any) => {
  const target = closet(event.target as any, 'td') as HTMLElement;
  if (target && target.dataset?.rowid && target.dataset?.colid) {
    event.preventDefault();
  }
};

监听onDrop事件，处理鼠标释放之后的单元格内容变更

const handleTdDrop = (event: any) => {
  const target = closet(event.target as any, 'td') as HTMLElement;
  let field = event.dataTransfer.getData('field');
  if (!target || !target.dataset?.rowid || !target.dataset?.colid || !field) {
    return;
  }
  // 单元格内容处理 ...
};