react-draggable 前端可拖动容器的使用

最近想开发一个可拖动组件。他可以实现左右布局。通过左右拖动来改变左右两个窗口的大小。 也可以实现上下布局，通过上下拖动来改变上下两个窗口的大小。

react-draggable

react-draggable 是react中的一个可拖动组件库。他可以指定x , y轴的拖动，可以监听一系列拖动事件

组件的引用

import Draggable from 'react-draggable'
<Draggable
      axis={isHorizontal ? 'x' : 'y'}
      handle=".handle"
      position={position}
      onStart={}
      onDrag={}
      onStop={}
>
      <div className='handle' >
      </div>
  </Draggable>

其中handle指明了，我们拖动的元素 div.handle

我们可以让Dragable组件，置于一个relative定们的容器中，然后让.handle元素在其中absolute定位

<div className={`my-draggable`} >
    <Draggable />
</div>

.my-draggable{
    width: 100%;
    height: 100%;
    position: relative;
    overflow: hidden;
    .handle{
        position: absolute;
        z-index:10;
        top: 0;
        bottom: 0;
        cursor: col-resize;
        padding:0 10px;
        margin-left: -10px;
    }
}

之后我们可以监听 onDrag事件。onDrag事件中，我们可以获取到e.pageX和e.pageY。但由于这两个属性是基于页面定位，他与我们拖动的handle之间，存在一个相对位置差。因些，我们可以让元素在拖动开始时onStart，记录到一个值。在onDrag中，来监听改变。最后，元素的值为onDrag跟onStart值的相对值

    let left = (move && start) ?  size + move - start : size;
    let position = { x : left, y : 0 };
	<Draggable
        axis='x'
        handle=".handle"
        position={position}
        onStart={(e) => {
            setStart(e.pageX);
        }}
        onDrag={(e) => {
            setMove(e.pageX)
        }}
        onStop={(e) => {
            if(!start || !move){
                return;
            }
            let newSize = size + move - start;
            if(newSize < 0){
                newSize = 0;
            }
            if(newSize > max){
                newSize = max;
            }
            setSize(size + move - start)
            setStart(null);
            setMove(null);
        }}
        >
        <div className='handle' >
        </div>
    </Draggable>

这样，我们就能让handle真正的拖动起来。

对于左右两个容器的大小，可以通过handle的位置来确定

let style1={}  , style2 = {} , position;
let left = (move && start) ?  size + move - start : size;
style1 = {
    left : 0 , width : `${left}px` , background : 'red'
}
style2 = {
    left : `${left}px`  , right : 0 , background: 'blue'
}
position = { x : left, y : 0 };
<div className='draggable-box' style={style1}>{children[0]}</div>
<div className='draggable-box' style={style2}>{children.slice(1)}</div>

组件使用

<MyDraggable  size={200} axis='x' >
    <div className='left' style={{}}>
        abc 
    </div>
    <div className='right'>
        <img src='https://dante-img.oss-cn-hangzhou.aliyuncs.com/3999255525.png' />
    </div>
</MyDraggable>

react-draggable常用属性介绍

属性	默认值	介绍
axis	x	handle拖动的方向，可选值 x ,y
handle	无	指定拖动handle的class
position	无	handle的位置，需要实时改变，否则handle无法拖动，类似于react的受控组件
onStrat	方法	拖动开始
onDrag	方法	拖动中

| onStop | 方法 | 拖动结束 |

源码下载

源码下载