展示的效果图

首先，我们看上面展示的效果图，分为左、中间有个拖动条、右这三部分。

所以布局如下：

dom：

dom结构

css：

css

js设计思想：

第一、做这种页面拖拽效果，我们首先想到的一定是鼠标事件，是的，这样就离成功不远了。

第二、鼠标的那些事件呢？ 我们得点击鼠标mousedown、点完之后还得移动才能实现拖拽吧那就是还有onmousemove，这两个过程都完成了是不是就得松开鼠标或者释放了mouseup。

第三、在这三个鼠标事件中我们具体要做怎样的操作呢，mousedown拖动条的时候获取它距离左面的距离left（）；mousemove的时候我们要让按钮移动，但是左右布不能超界，mouseup的时候停止拖动这个动作了。

js

很简单的几个步骤就可以实现一个很有比格的效果，

GitHub：https://github.com/pursuedreams/pursuedreams  

欢迎大家一起学习探讨。