react-draggable实现拖拽

安装react-draggable插件

npm install react-draggable

设置无限制的拖动范围

创建jsx文件

import React from "react";

// 引入样式

import './index.css'

// 引入拖拽插件

import Draggable from 'react-draggable';

export default function Tuo() {

? return (

? ? <div>

? ? ? <div className="app">

? ? ? ? <Draggable>

? ? ? ? ? <div className="box1">我可以随意移动box1</div>

? ? ? ? </Draggable>

? ? ? ? <Draggable>

? ? ? ? ? <div className="box2">我可以随意移动box2</div>

? ? ? ? </Draggable>

? ? ? </div>

? ? </div>

? );

}

引入css样式

.app {

? background-color: red;

? width: 800px;

? height: 500px;

? margin: auto;

? position: relative;

}

.box1 {

? background-color: rgb(127, 192, 127);

? width: 300px;

? height: 300px;

}

.box2 {

? background-color: rgb(142, 200, 107);

? width: 300px;

? height: 300px;

}

.box3 {

? background-color: rgb(112, 148, 194);

? width: 300px;

? height: 300px;

}

.box4 {

? ? background-color: rgb(174, 103, 160);

? ? width: 300px;

? ? height: 300px;

}

设置拖拽的范围

在父级内移动?

import React from "react";

// 引入样式

import "./index.css";

// 引入拖拽插件

import Draggable from "react-draggable";

export default function Tuo() {

? return (

? ? <div>

? ? ? <div className="app">

? ? ? ? {/* 限制范围*/}

? ? ? ? <Draggable bounds={{ right: 200, left: -400, top: 0, bottom: 200 }}>

? ? ? ? ? <div className="box3">我移动受限制box3</div>

? ? ? ? </Draggable>

? ? ? </div>

? ? </div>

? );

}

另一种在父级内移动?

import React from "react";

// 引入样式

import "./index.css";

// 引入拖拽插件

import Draggable from "react-draggable";

export default function Tuo() {

? return (

? ? <div>

? ? ? <div className="app">

? ? ? ? {/* 限制范围另一个方式*/}

? ? ? ? <Draggable bounds={".app"}>

? ? ? ? ? <div className="box4">我移动ye受限制box4</div>

? ? ? ? </Draggable>

? ? ? </div>

? ? </div>

? );

}

效果展示：?

?