导航  导航
每日一言

能被js重写的终将会被js重写。

react 标签下的全部文章(1)

react实现组件拖拽的方法

项目中经常会有组件拖拽的功能,每次要不就是从头写起,要不就是面向百度,两者都比较耗时,因此在此记录一下代码,以便日后复用。react实现拖拽与普通项目实现拖拽唯一的不同就是要在鼠标移动事件中不断地调用setState触发组件更新,以下是具体代码:class Drag extends Component {   constructor(props) {     super(props);     this.state = {       // 初始left、top       elX: 'unset',       elY: 'unset',     }     // 初始化鼠标点击位置与元素上侧和左侧的距离     this.disX = 0;     this.disY = 0;   }   // 定义鼠标下落事件   fnDown = (e) => {     const event = e || window.event;     const target = event.currentTarget || event.srcElement;     // 计算鼠标点击的位置与元素左侧和上侧的距离     this.disX = event.clientX - target.offsetLeft;     this.disY = event.clientY - target.offsetTop;     target.style.right = 'unset' // 如果外部样式表里使用right定位则需要写这一行     target.style.bottom = 'unset' // 如果外部样式表里使用right定位则需要写这一行     this.setState({       elX: event.clientX - this.disX,       elY: event.clientY - this.disY,     });     addEvent(document, 'mousemove', this.fnMove);     addEvent(document, 'mouseup', this.fnUp);     document.body.style.userSelect = 'none' // 拖动时禁止选择文本   }      // 鼠标移动事件   fnMove = (e)=> {     const event = e || window.event;     // 左右边界检测     let elX = event.clientX - this.disX     let elY = event.clientY - this.disY     let el = ReactDOM.findDOMNode(this)     if(elX <= 0) {       elX = 0     }else if(elX >= document.body.scrollWidth - el.offsetWidth) {       elX = document.body.scrollWidth - el.offsetWidth     }     if(elY <= 0) {       elY = 0     }else if(elY >= document.body.scrollHeight - el.offsetHeight) {       elY = document.body.scrollHeight - el.offsetHeight     }     this.setState({       elX,       elY,     });   }      fnUp = () => {     removeEvent(document, 'mousemove', this.fnMove);     removeEvent(document, 'mouseup', this.fnUp);     document.body.style.userSelect = 'unset'   }   render() {     return (       <div onMouseDown={this.fnDown} style={{ left:this.state.elX,top:this.state.elY }}></div>     );   } }