在 HTML 中有时可能需要实现拖拽div边框调整大小、左右拖拽div侧边栏调整区域大小、拖拽div调整大小的功能。使用 Split.js 可以非常简单的实现拖拽div边框调整大小、左右拖拽div侧边栏调整区域大小、拖拽div调整大小的功能。

本文将介绍如何使用 Split.js 拖拽调整左右两侧 div 的宽度。

页面中导入 Split.js

可以使用 CDN 导入 Split.js ，也可以使用 javascript 打包工具（如：rollup 或 webpack）打包 Split.js 软件包，然后导入 Split.js 。

1、使用 CDN 导入 Split.js，推荐使用 staticfile.net CDN：

<script src="https://cdn.staticfile.net/split.js/1.6.5/split.min.js"></script>

2、使用 javascript 打包工具（如：rollup 或 webpack）打包 Split.js 软件包，然后导入 Split.js：

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

定义 HTML 和 CSS

1、定义使用 Split.js 拖拽调整左右两侧 div 的宽度需要使用的 HTML

<div class="split">
    <div id="split-0"></div>
    <div id="split-1"></div>
</div>

2、定义使用 Split.js 拖拽调整左右两侧 div 的宽度需要使用的 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;
}

使用 Split.js 调整 div 宽度

1、使用 CDN 导入 Split.js 文件时，使用 Split.js 的方法：

window.Split(['#split-0', '#split-1'])

2、使用打包工具打包后，导入 Split.js 文件时，使用 Split.js 的方法：

// using ES6 modules
import Split from 'split.js'

Split(['#split-0', '#split-1'])

结语

本文介绍了如何使用 Split.js 实现拖拽div边框调整大小、左右拖拽div侧边栏调整区域大小、拖拽div调整大小的功能。