Recently wanted to develop a draggable component. He can achieve left and right layout. Drag left and right to change the size of the left and right Windows. You can also achieve up and down layout, by dragging up and down to change the size of the two Windows.

react-draggable

React – Draggable is a library of draggable components in React. It can specify x and y drag, and it can listen for a bunch of drag events

Component reference

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

Handle specifies the element div. Handle that we’re dragging

We can put the Dragable component in a relative relative container, and then we can put the handle element in absolute position

<div className={`my-draggable`} >
    <Draggable />
</div>
Copy the code
.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; }}Copy the code

And then we can listen for the onDrag event. In the onDrag event, we can get E. pagex and E. pagey. However, since these two attributes are based on page positioning, there is a relative position difference between it and the Handle we drag. So, we can have the element onStart at the beginning of the drag to record a value. In onDrag, listen for changes. Finally, the element value is the value of onDrag relative to 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>
Copy the code

In this way, we can actually get the Handle to drag.

The size of the left and right containers can be determined by the position of the 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>
Copy the code

Components use

<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>
Copy the code

This section describes common properties of react-draggable

attribute The default value introduce
axis x Handle drag direction. The value can be x or y
handle There is no Specify the class for dragging handle
position There is no The position of handle must be changed in real time; otherwise, Handle cannot be dragged. This is similar to a controlled component of React
onStrat methods Drag the start
onDrag methods Drag the

End | | onStop method | | drag

Download the source code

Download the source code