react 拖动修改元素大小

实现拖动修改元素大小

onMouseDown 获取第一次的信息
document.body.onmousemove 拖动获取相差值，跟上次的值相加，得到目前的值。
document.body.onmouseup 结束拖动

<i data-dir="se" onMouseDown={(e: any) => {
                    e.preventDefault()
                    e = e || event
                    let { clientX, clientY } = e
                    let width = parseFloat(editorStyle.width)
                    let height = parseFloat(editorStyle.height)
                    document.body.onmousemove = (e: any) => {
                        e = e || event
                        let newWidth = width + (e.clientX - clientX)
                        let newHeight = height + (e.clientY - clientY)
                        seteditorStyle({
                            ...editorStyle,
                            width: newWidth + 'px',
                            height: newHeight + 'px'
                        })
                        setTreeItemDataValue({
                            ...selectItem,
                            style: {
                                ...selectItem.style,
                                'width': `${newWidth}px`,
                                'height': `${newHeight}px`
                            }
                        })
                    }
                    document.body.onmouseup = function () {
                        document.body.onmousemove = null
                    }
                }} className="editor-grip editor-grip-se"><b></b></i>

--END--

转载于:https://www.jianshu.com/p/a3e759e31ac6