Draggable 拖拽

将dom拖拽到对应位置

基本用法

为dom容器提供全视口的拖拽能力.

123

<div style={{ height: '200px' }}>
  <Draggable>
    <div
      style={{
        width: '100px',
        height: '100px',
        background: '#c8deff',
        margin: '10px',
        lineHeight: '100px',
        textAlign: 'center',
      }}
    >
      123
    </div>
  </Draggable>
</div>

<div style={{ height: '200px' }}>
  <Draggable>
    <div
      style={{
        width: '100px',
        height: '100px',
        background: '#c8deff',
        margin: '10px',
        lineHeight: '100px',
        textAlign: 'center',
      }}
    >
      123
    </div>
  </Draggable>
</div>

自定义拖拽方向

设置axis属性配置拖拽能力

axis-x

axis-y

disabled

<div style={{ height: '400px' }}>
  <Draggable axis={'x'}>
    <div
      style={{
        width: '100px',
        height: '100px',
        background: '#c8deff',
        margin: '10px',
        lineHeight: '100px',
        textAlign: 'center',
      }}
    >
      axis-x
    </div>
  </Draggable>
  <Draggable axis={'y'}>
    <div
      style={{
        width: '100px',
        height: '100px',
        background: '#c8deff',
        margin: '10px',
        lineHeight: '100px',
        textAlign: 'center',
      }}
    >
      axis-y
    </div>
  </Draggable>
  <Draggable axis={'none'}>
    <div
      style={{
        width: '100px',
        height: '100px',
        background: '#c8deff',
        margin: '10px',
        lineHeight: '100px',
        textAlign: 'center',
      }}
    >
      disabled
    </div>
  </Draggable>
</div>

<div style={{ height: '400px' }}>
  <Draggable axis={'x'}>
    <div
      style={{
        width: '100px',
        height: '100px',
        background: '#c8deff',
        margin: '10px',
        lineHeight: '100px',
        textAlign: 'center',
      }}
    >
      axis-x
    </div>
  </Draggable>
  <Draggable axis={'y'}>
    <div
      style={{
        width: '100px',
        height: '100px',
        background: '#c8deff',
        margin: '10px',
        lineHeight: '100px',
        textAlign: 'center',
      }}
    >
      axis-y
    </div>
  </Draggable>
  <Draggable axis={'none'}>
    <div
      style={{
        width: '100px',
        height: '100px',
        background: '#c8deff',
        margin: '10px',
        lineHeight: '100px',
        textAlign: 'center',
      }}
    >
      disabled
    </div>
  </Draggable>
</div>

自定义拖拽控制

通过设置handle属性将拖拽控制权交由handle指向的dom

Drag herethis place cannot drag anywhere

<div style={{ height: '400px' }}>
  <Draggable handle="strong">
    <div
      style={{
        width: '150px',
        height: '150px',
        background: '#c8deff',
        margin: '10px',
        fontSize: '15px',
        textAlign: 'center',
      }}
    >
      <strong
        style={{
          padding: '5px 10px',
          border: '1px solid #666666',
          display: 'block',
          marginBottom: '10px',
          'font-size': '12px',
        }}
      >
        Drag here
      </strong>
      this place cannot drag anywhere
    </div>
  </Draggable>
</div>

<div style={{ height: '400px' }}>
  <Draggable handle="strong">
    <div
      style={{
        width: '150px',
        height: '150px',
        background: '#c8deff',
        margin: '10px',
        fontSize: '15px',
        textAlign: 'center',
      }}
    >
      <strong
        style={{
          padding: '5px 10px',
          border: '1px solid #666666',
          display: 'block',
          marginBottom: '10px',
          'font-size': '12px',
        }}
      >
        Drag here
      </strong>
      this place cannot drag anywhere
    </div>
  </Draggable>
</div>

拖拽范围限制

通过设置bounds属性限制拖拽范围 bounds传入对象/字符串/布尔值

bounds

<div style={{ height: '200px', overflow: 'hidden', position: 'relative' }}>
  <div
    style={{
      width: '700px',
      height: '159px',
      marginLeft: '10px',
      marginTop: '10px',
      position: 'absolute',
      border: '1px solid red',
    }}
  ></div>
  <Draggable bounds={{ top: 0, left: 0, bottom: 60, right: 600 }}>
    <div
      style={{
        width: '100px',
        height: '100px',
        background: '#c8deff',
        margin: '10px',
        lineHeight: '100px',
        textAlign: 'center',
      }}
    >
      bounds
    </div>
  </Draggable>
</div>

<div style={{ height: '200px', overflow: 'hidden', position: 'relative' }}>
  <div
    style={{
      width: '700px',
      height: '159px',
      marginLeft: '10px',
      marginTop: '10px',
      position: 'absolute',
      border: '1px solid red',
    }}
  ></div>
  <Draggable bounds={{ top: 0, left: 0, bottom: 60, right: 600 }}>
    <div
      style={{
        width: '100px',
        height: '100px',
        background: '#c8deff',
        margin: '10px',
        lineHeight: '100px',
        textAlign: 'center',
      }}
    >
      bounds
    </div>
  </Draggable>
</div>

拖拽事件回调

通过设置回调函数，根据拖拽信息进行处理

drop

<div style={{ height: '200px' }}>
  <Draggable
    onMouseDown={e => console.log('onMouseDown', e)}
    onMouseMove={e => console.log('onMouseMove', e)}
    onMousUp={e => console.log('onMousUp', e)}
  >
    <div
      style={{
        width: '100px',
        height: '100px',
        background: '#c8deff',
        margin: '10px',
        lineHeight: '100px',
        textAlign: 'center',
      }}
    >
      drop
    </div>
  </Draggable>
</div>

<div style={{ height: '200px' }}>
  <Draggable
    onMouseDown={e => console.log('onMouseDown', e)}
    onMouseMove={e => console.log('onMouseMove', e)}
    onMousUp={e => console.log('onMousUp', e)}
  >
    <div
      style={{
        width: '100px',
        height: '100px',
        background: '#c8deff',
        margin: '10px',
        lineHeight: '100px',
        textAlign: 'center',
      }}
    >
      drop
    </div>
  </Draggable>
</div>