05#Web 实战：实现可拖拽侧边栏

往左拖拽

如上图，红色方框圈住的部分是 container 的区域，即鼠标移动范围和侧边栏宽度变化的计算区域。

右侧边栏边缘处在整个 container 的 x 坐标是整个 container 的宽度减去右侧边栏的宽度，命名为 startWidth。假如，container 的宽度是 1355 px，右侧边栏的宽度是 100 px，那么 startWidth = 1355px - 100px = 1255px。

鼠标拖拽右侧边栏的左边缘处往左移动，得到一个鼠标监听事件，获取其数值：event.pageX。假如 event.pageX = 1200px，那么右侧边栏应该移动：

\[moveStep = startWidth - event.pageX = 1255px - 1200px = 55px \]