关于react.js:React-Draggable-实现拖拽-最详细中文教程-卡拉云

本文首发：《React Draggable 实现拖拽 – 最具体中文教程 – 卡拉云》

React Draggable 是 react 生态中，最好用的拖拽实现库之一。如果你的利用中须要实现拖拽性能，能够尝试用 react-draggable，它能够满足少数状况下的拖拽需要，比方一个弹出设置浮窗，能够互相遮挡的容器之类。在所有 react 拖拽库里 (即 react dnd, drag and drop)，react-draggable 算是把功能性和易用性均衡得最好的拖拽库了。

在实现卡拉云时，咱们也大量应用了 react-draggable。所以这篇文章里，咱们介绍如何应用 react-draggable，一些常见的设置和咱们的教训。请依据上面的代码一步步实现，最终你要实现的成果如下

如果你在参考的过程中有不确定代码应该怎么写，能够间接到代码库中找到对应的文件。本文可参考的代码放在 github 上: react-draggable 代码，感觉不错的话无妨打个星。

react-draggable 简介

react-draggable 通过几年的倒退，曾经是一个绝对比较稳定的库了。从 npm trends 上看，从 16 年起它的风行水平就迅速超过了其它几个相似的我的项目。它在 github 上算十分热门的我的项目了，应用它的我的项目泛滥，所以能够释怀地应用。如果有 bug 反馈也会十分快

如果看它的源码的话，会发现它的原理其实很简略，它只是将一个须要被拖拽的组件包到它定义的一个组件中，当鼠标拖拽时，从新计算组件的地位，这样就实现了“拖拽”的成果。这也是绝大多数拖拽组件库的实现形式。

筹备我的项目

咱们按惯例，应用 create-react-app 这个工具来创立我的项目。如果你本地没有装置 npx 的话，强烈推荐，应用十分不便。

npx create-react-app react-draggalbe-tutorial
cd react-draggalbe-tutorial
npm start

在筹备好 react 脚手架后，你就能够到目录里，把我的项目跑起来。

执行 npm start。这时候应该看到一个相熟的画面

当然如果你是在已有我的项目里筹备加上 react-draggable，那么跳过本步，间接执行下一步装置就好了。

装置 react-draggable

当初执行 npm install react-draggable，执行完后应该在你的 node_modules 中就装好了 react-draggable。

☁  react-draggalbe-tutorial [master] npm install react-draggable

added 2 packages, and audited 1408 packages in 2s

新建一个盒子组件

咱们先在 App.js 文件中加上几个简略的构造，比方一个框用来示意须要拖拽的组件，同时在框上加上一个拖拽把手，这样不便用户辨认。

在 App.js 中加上一个叫 Box 的组件先占位，如下

import './App.css';

const Box = () => {return <>hello world</>}

function App() {
  return (
    <div className="App">
        <Box></Box>
    </div>
  );
}

export default App;

留神，这里的 Box 只是非常简单地在屏幕上打一行字进去。

接着，咱们把 Box 略微欠缺一下，把它的 css 写得规整一点。如果你对 css 自身不相熟，没有关系，间接复制 index.css 中的代码就能够了。

.box {
  background-color: green;
  width: 300px;
  height: 300px;
  display: flex;
  flex-direction: column;
}

.drag-handler {
  background-color: grey;
  height: 50px;
  cursor: move;
}

到这里，咱们应该曾经能够看见根本成型的一个盒子组件。留神当鼠标移到把手上时，会呈现拖拽的指针批示，这样能够提醒用户这是一个可拖拽组件。

接入 react-draggable

当初，咱们心愿当用户鼠标拖拽把手时，把手自身能够被挪动。首先咱们把 react-draggable 导入

import Draggable from 'react-draggable'; 

到这里，App.js 中就是。

import './App.css';
import Draggable from 'react-draggable'; // The default

const Box = () => {
  return <div className="box">
    <div className='drag-handler'> 拖这里能够 </div>
    <div>box 注释，拖这里拖不动 </div>
  </div>
}

function App() {
  return (
    <div className="App">
      <Draggable>
        <Box></Box>
      </Draggable>

    </div>
  );
}

export default App;

然而千万留神，如果这里你去试图拖拽一下把手，是拖不动的。起因是 Draggable 并不能间接包一个组件，而须要再包一层 div。我一开始在这里卡了很久工夫，但解决的方法很简略，只须要多包一层 div 在里面即可。

function App() {
  return (
    <div className="App">
      <Draggable>
        <div>
          <Box />
        </div>
      </Draggable>

    </div>
  );
}

能够看到，如果这时候开始拖动，Box 就能够在界面上自在挪动了。然而有一个问题，咱们不心愿用户拖动注释局部时，也将组件拖动。

要解决这个问题也很简略，请看下一章

如何在 react-draggable 中仅容许组件的一部分被拖动

在 react-draggable 的 API 中，一个属性叫 handle，这个属性的作用就是用来选出对拖动有反馈的组件局部。

对应到咱们下面的例子，咱们只心愿在用户拖动把手时，整个组件挪动。所以咱们只须要用 handle 属性，选出来把手即可。咱们在代码中退出

function App() {
  return (
    <div className="App">
      <Draggable handle='.drag-handler'>
        <div>
          <Box />
        </div>
      </Draggable>

    </div>
  );
}

留神这里，.drag-handler 是一个选择器，用来选出 className=drag-handler 的组件局部，也就是对应的咱们的把手。

那么到此，组件就只能通过拖动把手而拖动了。

限度可拖动范畴

有时候咱们心愿限度能够拖动的范畴，比方你不心愿用户把一个组件拖到另一个区域，因为可能挡住那个区域的其它界面。在 react-draggable 中，要限度拖动范畴很简略，只须要给定 bounds 属性就能够了。

bounds: {left?: number, top?: number, right?: number, bottom?: number} | string,

这个 bounds 属性能够指定屏幕上上下左右四个地位的边界限度，同时你也能够给一个字符串，用来抉择组件的父组件，这样能够限度该组件只能在它的父组件中挪动。限度在父组件中的状况较多，比方你在做一个扑克牌游戏时，显然只心愿扑克牌只在牌桌上被拖动，那么你就能够限度扑克牌，让它始终在父组件牌桌中。

具体的例子这里就不开展讲了，请自行摸索。

调整款式

最初咱们略微调整一下款式，让整个 APP 看起来丑陋一些。到此，你应该就曾经学会应用 react-draggable 来实现拖拽操作了

其它库和实现

实现拖拽的其它形式也还很多，咱们会在之后的文章中介绍。如果你用的是 Vue 的话，无妨参考咱们的文章: 最好的 Vue 拖拽库举荐

总结

react-draggable 总体来说是一个十分优良的拖拽库，尽管本人写也不须要太多代码，但应用一个“经验过战场”的组件库还是能够省掉不少本人实现的工夫。同时它的 API 足够优良，能够满足日常工作须要。如果你感觉本人写有太大挑战，尝试一下用卡拉云搭建后盾工具，事倍功半。