react实现简单的拖拽功能 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.offsetWidthlet y = obig.offsetHeight - osmall.offsetHeightif (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 (this.small_down(e)} style={{ position: "absolute", left: `${this.state.translateX}px`, top: `${this.state.translateY}px` }} />)}}; 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 ( )}}export default App;

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