低代码02之左侧物料拖拽到内容区（实现聚焦、拖拽、辅助线等）

低代码02之左侧物料拖拽到内容区

• 安装依赖

npm i deepcopy

• 功能介绍
  • 1：左侧菜单拖拽功能 - useMenuDragger.js
  • 2：右侧内容区域，点击获取焦点功能 - useFocus.js
  • 3：右侧内容区域，内容区域点击组件聚焦后进行拖拽功能 - useBlockDragger.js
  • 4：左侧菜单组件拉入内容区域时，添加辅助线 （useFocus.js与 useBlockDragger.js ）
    • 在useFocus.js之中，先找到最后聚焦的组件索引值，拿到这个组件
    • 在useBlockDragger.js中，定义辅助线markLine数据，记录拖拽前 B组件的位置 top和left，以及辅助线lines数据（顶对顶…中对中等）、移动的时候（需要拿到最后辅助线的x和y数据）

功能1：左侧菜单拖拽功能 - src / packsges / useMenuDragger.js

• 左侧菜单的拖拽，放入内容区之中
  draggable onDragstart={(e) => dragstart(e, component)} onDragend={dragend}

// 菜单拖拽功能
export function useMenuDragger (containerRef,data){
   
  let currentComponent = null // 当前拖拽的组件
  const dragstart = (e,component)=>{
   
    // dragenter 进入元素中，添加一个移动标识
    // dragover 在目标元素经过 必须要组织默认事件 否则不能触发drop
    // dragleave 离开元素的时候 需要增加一个禁用的标识
    // drop 松手的时候 根据拖拽的组件 添加一个组件
    containerRef.value.addEventListener('dragenter',dragenter)
    containerRef.value.addEventListener('dragover',dragover)
    containerRef.value.addEventListener('dragleave',dragleave)
    containerRef.value.addEventListener('drop',drop)
    currentComponent = component
  }
  // 拖拽结束 去掉事件 + 清空当前组件
  const dragend = (e)=>{
   
    containerRef.value.removeEventListener('dragenter',dragenter)
    containerRef.value.removeEventListener('dragover',dragover)
    containerRef.value.removeEventListener('dragleave',dragleave)
    containerRef.value.removeEventListener('drop',drop)
    currentComponent = null;
  }
  const dragenter = (e)=>{
   
    e.dataTransfer.dropEffect = 'move'; // 移动标识
  }
  const dragover = (e)=>{
   
    e.preventDefault(); // 阻止默认行为
  }
  const dragleave = (e)=>{
   
    e.dataTransfer.dropEffect = 'none'; // 离开 设置禁用
  }
  const drop = (e)=>{
   
    let blocks = data.value.blocks; // 内部渲染的组件
    // 更新data的数据 触发更新app传递进来的v-model数据
    data.value = {
   
      ...data.value, 
      blocks:[
        ...blocks,
        // 拿到拖拽入容器的组件 位置 与 key值
        {
    top:e.offsetY, left:e.offsetX ,zIndex:1,
          key:currentComponent.key,
          alignCenter:true // 松手时居中 需要在editor-blick.jsx之中配置
        }
      ]
    }
    currentComponent = null
  }
  return {
   
    dragstart,
    dragend
  }
}

功能2 内容区域聚焦与失去焦点 src / packsges / useFocus.js

• 内容区域之中的组件聚焦事件与按下shift聚焦与按下内容区域失去焦点（ 含有按下组件的时候，执行拖拽的回调函数 ）、获取到 聚焦的组件数据
  <EditorBlock class={block.focus ? "editoe-blick-focus" : ""} block={block} onMousedown={(e) => blockMousedown(e, block)}></EditorBlock>

// 2：容器内获取焦点功能-01：点击容器时候聚焦与按住shift时候支持多个聚焦
import {
    computed ,ref } from "vue";
export function useFocus(data, callback) {
   
  let selectIndex = ref(-1); // 最后点击组件的索引
  // 最后点击聚焦的组件
  let lastSelectBlock = computed(()=>data.value.blocks[selectIndex.value])
  const clearBlockFocus = () => {
   
    data.value.blocks.forEach((block) => (block.focus = false));
  };
  const blockMousedown = (e, block,index) => {
   
    e.preventDefault();
    e.stopPropagation();
    // block上设置一个focus属性 若是聚焦为true否则为flase 把之前的清空
    if (e.shiftKey) {
    // 按下shift若是只有一个被选中，则当前选中为true，不切换flase
      if ( focusData.value.length <= 1 ) {
   
        block.focus = true;
      } else {
   
        block.focus = !block.focus;
      }
    } else {
   
      // 当没有选中时候 清除之前的，并且选中当前
      if (!block.focus) {
   
        clearBlockFocus();
        block.focus = true;
      }
    }
    selectIndex.value = index
    // 选中的时候 回调函数
    callback(e);
  };
  // 按下内容区域 失去焦点
  const containerMousedown = () => {
   
    clearBlockFocus();
    selectIndex.value = -1
  };
  // 获取到 聚焦的组件
  const focusData = computed(() => {
   
    let focus = [];
    let unfocused = [];
    data.value.blocks.