导航  导航

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>
    );
  }
}


如果觉得文章还不错,或者对你有帮助的话,那就点个赞呗! 点赞7
向右滑动

全部评论(0)