简单的低开编辑器(三):实现组件画布内拖拽

好家伙，

0.代码已开源

Fattiger4399/lowcode-demo: 一个简单的低代码编辑器 技术栈:Vue3 element-plus jsx (github.com)

 

本篇实现效果如下：

 

1.分析

这玩意的思路很好理解

本质上就是给组件绑个拖拽方法

拽到哪里，就把位置更新给组件就好了，简单粗暴

当然，需要做选中判定，知道我选中了哪些组件

 

 

2.选中判定实现

//editor.jsx

import { useFocus } from "./useFocus";

let { blockMousedown, focusData } = useFocus(data, (e) => {
            mousedown(e)
        });

 

 

 

//useFocus.js

import {computed} from 'vue'

//useFocus用于处理画布中组件元素的选中
export function useFocus(data,callback){ //获取哪些元素被选中了
    const focusData = computed(() => {
        let focus = [];
        let unfocused = [];
        data.value.blocks.forEach(block => (block.focus ? focus : unfocused).push(block))
        return {focus,unfocused}
    })
    return{
        blockMousedown,
        focusData
    }
}

此处，我们做一次选中判定，将选中的组件，和未被选中的组件，分开放，并返回

 

 

//useFocus.js

const blockMousedown = (e, block) => {
        //block上我们规划一个属性focus 获取焦点后就将focus变为true
        e.preventDefault();
        e.stopPropagation();
        if (e.shiftKey) {
            block.focus = !block.focus
        } else {
            if (!block.focus) {
                clearBlockFocus();
                block.focus = true;//清空其他组件的focus属性
            } else {
                block.focus = false;
            }
        }
        callback(e)
    }

判断是否按下了shift键

 

 

3.点击触发事件

//editor.jsx

<div class="editor-container-canvas__content"
                        style={containerStyles.value}
                        ref={containerRef}
                        onMousedown={containerMousedown}>
                        {
                            (data.value.blocks.map(block => (
                                <EditorBlock
                                    class={block.focus ? 'editor-block-focus' : ''}
                                    block={block}
                                    onMousedown={(e) => blockMousedown(e, block)}
                                ></EditorBlock>
                            )))
                        }
                    </div>

let { blockMousedown, focusData } = useFocus(data, (e) => {
            mousedown(e)
        });
        const mousemove = (e) => {
            let { clientX: moveX, clientY: moveY } = e;
            let endX = moveX - dragState.startX;
            let endY = moveY - dragState.startY;

            focusData.value.focus.forEach((block, idx) => {
                // console.log(dragState)
                block.top = dragState.startPos[idx].top + endY;
                block.left = dragState.startPos[idx].top + endX;
            })
        }
        const mouseup = (e) => {
            console.log(document)
            document.removeEventListener('mousemove', mousemove)
            document.removeEventListener('mouseup', mouseup)
        }
        const mousedown = (e) => {
            dragState = {
                startX: e.clientX,
                startY: e.clientY,
                startPos: focusData.value.focus.map(({ top, left }) => ({ top, left }))
            }
            console.log(dragState)
            document.addEventListener('mousemove', mousemove)
            document.addEventListener('mouseup', mouseup)
        }

 

//useFocus.js

const blockMousedown = (e, block) => {
        //block上我们规划一个属性focus 获取焦点后就将focus变为true
        e.preventDefault();
        e.stopPropagation();
        if (e.shiftKey) {
            block.focus = !block.focus
        } else {
            if (!block.focus) {
                clearBlockFocus();
                block.focus = true;//清空其他组件的focus属性
            } else {
                block.focus = false;
            }
        }
        callback(e)
    }

判断是否按下了shift键

 

focusData.value.focus.forEach((block, idx) => {
                // console.log(dragState)
                　　　　  block.top = dragState.startPos[idx].top + endY;
                block.left = dragState.startPos[idx].top + endX;
            })

最后更改数据

搞定！