react 拖动修改元素大小

作者: 反者道之动001 | 来源:发表于2019-06-04 11:00 被阅读0次

    实现拖动修改元素大小

    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--

    相关文章

      网友评论

        本文标题:react 拖动修改元素大小

        本文链接:https://www.haomeiwen.com/subject/nxhlxctx.html