react实现简单的拖拽功能

本文实例为大家分享了react实现简单的拖拽功能的具体代码，供大家参考，具体内容如下

src文件夹下新建文件夹demo  然后在创建两个文件js和css

demo.js文件代码

// react实现拖拽import React from 'react'// 引入css样式import './demo.css'class Drag extends React.Component {  constructor(props) {    super(props);    this.state = {      translateX: 0,      translateY: 0,    };  }  small_down = (e) => {    var obig = this.refs.move.parentNode;    var osmall = this.refs.move;    var e = e || window.event;    /*用于保存小的div拖拽前的坐标*/    osmall.startX = e.clientX - osmall.offsetLeft;    osmall.startY = e.clientY - osmall.offsetTop;    /*鼠标的移动事件*/    document.onmousemove = function (e) {      var e = e || window.event;      osmall.style.left = e.clientX - osmall.startX + "px";      osmall.style.top = e.clientY - osmall.startY + "px";      /*对于大的DIV四个边界的判断*/      let x = obig.offsetWidth - osmall.offsetWidth      let y = obig.offsetHeight - osmall.offsetHeight      if (e.clientX - osmall.startX <= 0) {        osmall.style.left = 0 + "px";      }      if (e.clientY - osmall.startY <= 0) {        osmall.style.top = 0 + "px";      }      if (e.clientX - osmall.startX >= x) {        osmall.style.left = x + "px";      }      if (e.clientY - osmall.startY >= y) {        osmall.style.top = y + "px";      }    };    /*鼠标的抬起事件,终止拖动*/    document.onmouseup = function () {      document.onmousemove = null;      document.onmouseup = null;    };  }  componentDidMount() {  }  render() {    return (      <div className=www.easck.com'box'>        <div className='box-item' ref="move" onMouseDown={e => this.small_down(e)} style={{ position: "absolute", left: `${this.state.translateX}px`, top: `${this.state.translateY}px` }} />      </div>    )  }};export default Drag

demo.css代码

.box{ width: 100vw; height: 100vh; position: relative;}.box-item{ position: absolute; width: 100px; height: 100px; background: pink;}

App.js里面

import './App.css';// 引入demo这个文件import Drag from './demo/demo'import React from 'react';class App extends React.Component { constructor(props) {  super(props) } render() {  return (   <div>    <Drag></Drag>   </div>  ) }}export default App;

这样就可以实现一个简单的拖拽了

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。