这是一个基于 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
import { DragArea, DragItem } from 'react-rnd-dragline';
import './index.less';
export default function IndexPage() {
return (
<DragArea
bounds="body"
guidelineColor="red"
onAdsorb={true}
adsorbThreshold={5}
>
<DragItem>
<div className="t t1">a</div>
</DragItem>
<DragItem>
<div className="t t1">b</div>
</DragItem>
<DragItem>
<div className="t t2">c</div>
</DragItem>
<DragItem>
<div className="t t3">d</div>
</DragItem>
</DragArea>
);
}
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent