Question

I’m wondering how to replicate the functionality of the draggable column/row dividers such as found at http://jsfiddle.net/.

Is this built on top of some library?

Thanks!

Answer 1

The draggable dividers in the jsfiddle site are implemented using the code in jsfiddle.net/js/LayoutCM.js and jsfiddle.net/codemirror/js/codemirror.js.

Note: The new code change in SO makes it really finiciky to directly link to the jsfiddle implementation in order to explain how they implemented something.

Other relevant StackOverflow questions include

• Resize elements by dragging divider handler
• Draggable div without jquery ui
• What is a lightweight script jquery extension that implements a draggable divide ?

The is functionality is provided various projects including jquery plugins and other javascript scripts

• jquery-divider
• jquery-splitter
• splitplane
• jqueryui Resizable (used as component to implement)
• jqueryui Draggable(used as component to implement)
• mootools splitter
• yui resize (used as component to implement)
• jquery split plane

Also see other resources including

• An example jquery splitplane implementation
• The example splitplane in Google’s closure library
• split plane control in yui example

Most people seem to use an existing jquery plugin or make their own implementation using the Draggable and Resizable components, for example code see the other StackOverflow posts mentioned.