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's UI 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.Here's a demo.
Even more impressive is how many lines of JavaScript it took to make this demo: six. Eight if you count jQuery's $(document).ready:
$(document).ready(function($){
$("[id^=win]").draggable({
containment: 'document',
stack: {group: $("[id^=win]"), min: 1},
handle: $(".title"),
opacity: 0.8
});
});
Next step in this project will be to logically break things up into separate classes using Prototype's classes and inheritance. For example, a Window class will represent a window in the browser, a TaskManager class will represent a set of Windows, etc. To be continued ...
Did you find this post helpful, or at least, interesting?