拖拽调整左右区域宽度 js库

方法一：

https://github.com/eknowles/resizerjs

使用方法：
引入：

<script src="~/js/resizer.js"></script>
<link rel="stylesheet" type="text/css" href="~/css/resizer.css">

js:

let resizer = new Resizer('#targetId')   //传入父容器的selector

方法二

https://github.com/nathancahill/split/tree/master/packages/splitjs

效果：

使用方法：
引入：

<script src="~/js/split.js"></script>

初始化css：

.split {
    display: flex;
    flex-direction: row;
}

.gutter {
    background-color: #eee;
    background-repeat: no-repeat;
    background-position: 50%;
}

.gutter.gutter-horizontal {
    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAeCAYAAADkftS9AAAAIklEQVQoU2M4c+bMfxAGAgYYmwGrIIiDjrELjpo5aiZeMwF+yNnOs5KSvgAAAABJRU5ErkJggg==');
    cursor: col-resize;
}

js:

Split(['#leftDiv', '#rightDiv'], {
    sizes: [45, 55],
    minSize: [533, 1000],
    maxSize: [850, Infinity],
    dragInterval: 50,
    onDragEnd: function (sizes) {
        console.log(sizes)
    }
})

使用对比

1.两个js库对div的宽度拖拽都比较好用。
2.区别之处：
如果自身业务中，容器内还存在其他鼠标拖拽事件： resizerjs 会对其有屏蔽作用； split.js 不会有影响
示例：