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 (

   

     

       

         

我可以随意移动box1

       

       

         

我可以随意移动box2

       

     

   

  );

}

引入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 (

   

     

        {/* 限制范围*/}

       

         

我移动受限制box3

       

     

   

  );

}

另一种在父级内移动 

import React from "react";

// 引入样式

import "./index.css";

// 引入拖拽插件

import Draggable from "react-draggable";

export default function Tuo() {

  return (

   

     

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

       

         

我移动ye受限制box4

       

     

   

  );

}

效果展示：