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 拖动修改元素大小

    实现拖动修改元素大小 onMouseDown 获取第一次的信息document.body.onmousemove ...

  • 2018-03-08

    resize允许用户通过拖动的方式来修改元素的尺寸来改变元素的大小 resize: none | both | h...

  • 利用canvas实现邀请函编辑器

    说白了就是用canvas生成一张图片,图片里的内容可以任意添加删除修改,并可拖动元素位置,可设置字体颜色大小。最终...

  • Unity 拖动和修改Panel大小

    一. 节点参考: 拖动的脚本放在子Panel上(需要一个父Panel)修改大小脚本放在Panel下的Resize节...

  • jquery常见问题小结

    禁止页面拖动效果 根据屏幕大小调整页面样式 iframe找到父级元素

  • react-native switch

    自定义 react-native switch ,可以修改大小,颜色,背景等 ``` import React, ...

  • js的拖动相关

    拖动相关的事件 dragstart: 被拖动元素 开始拖动 时触发的事件。 drag: 被拖动元素 拖动过程 触发...

  • 受控组件

    如input Html:input元素自己维护state,修改后自动修改value(双向)react:value绑...

  • PS修改画布大小

    1.选择裁剪工具 2.拖动上下左右画布 这样就可以修改画布大小了。

  • Javascript知识整理——拖放

    拖放事件 拖动某元素时,将依次触发下列事件(被拖动元素): dragstart按下鼠标并开始移动鼠标时在被拖动元素...

网友评论

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

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