快捷導(dǎo)航

react實(shí)現(xiàn)簡單的拖拽功能

更新時(shí)間：2022年03月08日 10:53:15 作者：至_臻

這篇文章主要為大家詳細(xì)介紹了react實(shí)現(xiàn)簡單的拖拽功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

本文實(shí)例為大家分享了react實(shí)現(xiàn)簡單的拖拽功能的具體代碼，供大家參考，具體內(nèi)容如下

src文件夾下新建文件夾demo 然后在創(chuàng)建兩個(gè)文件js和css

demo.js文件代碼

// react實(shí)現(xiàn)拖拽
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拖拽前的坐標(biāo)*/
? ? ? ? osmall.startX = e.clientX - osmall.offsetLeft;
? ? ? ? osmall.startY = e.clientY - osmall.offsetTop;
? ? ? ? /*鼠標(biāo)的移動事件*/
? ? ? ? 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四個(gè)邊界的判斷*/
? ? ? ? ? ? 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";
? ? ? ? ? ? }
? ? ? ? };
? ? ? ? /*鼠標(biāo)的抬起事件,終止拖動*/
? ? ? ? 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這個(gè)文件
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;

這樣就可以實(shí)現(xiàn)一個(gè)簡單的拖拽了