实现拖动修改元素大小
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--
网友评论