Make Your Own Javascript Window Manager/Engine Using jQuery Draggable


Wed Jan 28 18:00:00 2009 -0800

Recently, I’ve been experimenting with jQuery and the jQuery UI interface for a few side-projects. As of right now, I’m working on creating my own JavaScript windowing engine complete with a window manager, task bar, etc. Not surprisingly, I found that jQuery UI’s Draggable interface provides a large majority of the desired drag-and-drop functionality for free.

Using UI Draggable, I created a functional drag-and-drop windowing interface in about 20 minutes.

Lame Demo


Only took six lines of real JavaScript to make this demo — eight if you count jQuery’s $(document).ready boilerplate:

$(document).ready(function($) {
   containment: 'document',
   stack: {group: $("[id^=win]"), min: 1},
   handle: $(".title"),
   opacity: 0.8


javascript jquery