React拖拽库

react-draggable

参数说明

• axis

  值为'x'/'y'
  只能在x或y轴上移动
  

• grid

  值为整形数组 [25, 25], [25, 50]
  例:<Draggable grid={[25, 80]}></Draggable>
  表明x轴和y轴移动的最小单位为多少px
  

• bounds

  例：<Draggable bounds={{top: -100, left: -100, right: 100, bottom: 100}} ></Draggable>
  说明: 上下左右四个边界最大所能抵达的范围
  

设置拖拽可用区和禁用区

<Draggable handle="strong" {...dragHandlers}>
          <div className="box no-cursor">
            <strong className="cursor"><div>Drag here</div></strong>
            <div>You must click my handle to drag me</div>
          </div>
        </Draggable>

        <Draggable cancel="strong" {...dragHandlers}>
          <div className="box">
            <strong className="no-cursor">Can't drag here</strong>
            <div>Dragging here works</div>
          </div>
        </Draggable>