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

©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • 我们首先要明白,我们给页面添加效果用到的js到底是什么?js其实包含三部分:dom 文档对象模型 bom 浏览...
    一直以来都很好阅读 898评论 0 0
  • offset家族三大家族和一个事件对象三大家族(offset/scroll/client)事件对象/event ...
    Yuann阅读 1,131评论 0 5
  • 没有收到猫头鹰请柬的我,依旧会在麻瓜的世界里,披荆斩棘。 今天中午的空闲时间看了一部电影《住在海边的猫头鹰》,别人...
    程么么阅读 1,373评论 0 2
  • 今天周末,说好带儿子去海边洗海澡,可今天的天气实在太热,老公又不想失言,下午3点带儿子去了莱州金沙滩,还没到给我发...
    李宇航妈妈阅读 132评论 0 0
  • 持续的富足和稀缺,在经过时间的放大之后,都会出现指数般的发展,会实现质变。在不断进步的科技肯定能解决我们当...
    多多君皇阅读 277评论 0 0

友情链接更多精彩内容