react实现简单的拖拽功能

2024-04-02 19:55

短信预约 -IT技能 免费直播动态提醒

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

class="lazy" data-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;
        
        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";
            
            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='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;

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