react-rnd-dragline-enhancement

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

使用方法示例

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>
  );
}