实现拖动修改元素大小
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--
来源: http://www.jianshu.com/p/a3e759e31ac6