本文实例为大家分享了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;
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 Dragdemo.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;这样就可以实现一个简单的拖拽了
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持编程网。
