上一个版本存在许多bug，此次重构了代码，重写了实现逻辑和计算算法，使用方法也更简单了

react-rnd-dragline

这是一个基于 react-rnd 实现的拖拽组件，在rnd的功能基础上增加了拖拽时显示辅助线及吸附的功能。

安装

$ npm i react-rnd-dragline

or

$ yarn add react-rnd-dragline

使用

属性

• DragArea

  • bounds: RndProps['bounds']

    默认值为空 ""

    拖拽边界，应用到所有DragItem上，也可以单独在DragItem上使用

  • guidelineColor: string

    辅助线颜色，默认值：'#448ef7'

  • guidelineWidth: number

    辅助线宽度,默认值：1

  • onAdsorb: boolean

    是否开启吸附效果，默认值：ture

  • adsorbThreshold: number

    吸附阈值，onAdsorb为ture时生效，默认值为：5

• DragItem 继承 react-rnd的所有属性，更多属性请参考 react-rnd

注： DragItem的Children样式有padding时，需要设置box-sizing为border-box

使用方法示例

1import { DragArea, DragItem } from 'react-rnd-dragline';
2import './index.less';
3
4export default function IndexPage() {
5  return (
6    <DragArea
7        bounds="body"
8        guidelineColor="red"
9        onAdsorb={true}
10        adsorbThreshold={5}
11      >
12        <DragItem>
13          <div className="t t1">a</div>
14        </DragItem>
15        <DragItem>
16          <div className="t t1">b</div>
17        </DragItem>
18        <DragItem>
19          <div className="t t2">c</div>
20        </DragItem>
21        <DragItem>
22          <div className="t t3">d</div>
23        </DragItem>
24      </DragArea>
25  );
26}
27
28