效果左右布局，拖拽后，宽度放大缩小
其实自己写也可以，不过还是发现了两个好用的js库，既然不需要自己写，当然是能偷懒就偷懒
1、resizerjs
官网地址：https://github.com/eknowles/resizerjs
<!doctype html>
<html>
<head><meta charset="utf-8"><title>拖拽</title><style>[data-rz-handle] {flex: 0 0 6px;background-color: rgba(0, 0, 0, 0.9);}[data-rz-handle] div {width: 6px;background-color: rgba(0, 0, 0, 0.9);}.container {width: 1200px;height: 400px;display: flex;}.item {flex: 1;}.item1 {background-color: green;}.item2 {background-color: darkred;}</style>
</head>
<body>
<div class="container"><div class="item item1"></div><div class="item item2"></div>
</div>
<script src="./resizerjs-master/dist/resizer.js"></script>
<script>const myResizer = new Resizer('.container');
</script>
</body>
</html>
resizerjs 体量小一共才100多行，代码简洁，很容易看懂，很适合比较简单的场景。
2、splitjs
官网地址：https://github.com/nathancahill/split/tree/master/packages/splitjs
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>* {margin: 0;padding: 0;}.box {display: flex;}#one {height: 400px;background-color: green;}#two {height: 400px;background-color: rebeccapurple;}#three {height: 400px;background-color: yellowgreen;}</style>
</head>
<body>
<div class="box"><div id="one">content one</div><div id="two">content two</div><div id="three">content three</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/split.js/1.6.0/split.min.js"></script>
<script>Split(['#one', '#two', '#three'], {sizes: [25, 25, 50],minSize: 200,onDragEnd: function (sizes) {console.log(sizes);}});
</script>
</body>
</html>
)
