In large part, the iPad's magic comes from its touch-based interface. Touch-based interfaces are generally "incompatible" with those made for a mouse and web technologies are still beginning to explore this new medium. We hope to shed a speck of light on this problem by distributing a free javascript class we developed for gotProject, enabling any website to add draggables and droppables for an iPad or iPhone. To see the full potential of this library, grab an iPad, create an account on gotProject, and play around with the amazing interface. It's the first web clipper & information manager for the iPad with a drag drop interface!

If you'd like to use the library for your site, simply download it using the green link above. I hope you find it useful and timesaving. This Drag Drop library requires no other javascript files or libraries to run. To learn how to use it, read the API, example code, and demos below (NOTE: the demos won't work unless you are viewing this page with an iPad or iPhone). If you are interested, I have also set up a separate demo page for both iPad and iPhone here. If you would like to suggest any changes or feel like expanding the library, please contact me at tommaso [at] gotproject.com and I'll be happy to upload any useful additions. Happy coding!

Draggable API

Draggables are divs that can be moved around the screen using your fingers.

Syntax

//To make an element draggable var D = new webkit_draggable('id_of_element', {options});

//To stop an element from being draggable D.destroy();

Options

handle - (string | element) : the element to act as the handle for the draggable. If nothing is specifed the root div will become the handle.
revert - (boolean | string) : if true, draggable will return to its original position after being dragged unless it's successfully released on a droppable. If false, draggable will stay where the user last placed it. If set to "always" draggable will always return to its initial location after being dragged. Default is set to false.
scroll - (boolean) : if true, the draggable will cause the page to scroll when moved near the edges. If false, the draggable will not cause scrolling. Default is set to false.
onStart - (function) : this function will be called at the beggining of a drag event.
onEnd - (function) : this function will be called at the end of a drag event.

Examples

//simplest way to create a default draggable var RD = new webkit_draggable('redbox');

//set handle of element and enable scroll plus onEnd event var YB = new webkit_draggable('yellowbox', {revert : true, scroll : true, onEnd : function(){$('yellowbox').style.border = '3px solid red'}});

//all options enabled var GB = new webkit_draggable('greenbox', {handle : 'greenboxhandle', scroll : true, revert : true, onStart : function(){$('greenbox').style.background = '#333333'}, onEnd : function(){$('greenbox').style.background = 'green'}});

//You can dynamically alter any property of an existing draggable instance with draggable.set('prop','value') ex: RB.set('scroll', true);

Demo [Only Works on iPad / iPhone]

Red Draggable
(no revert)
(no scrolls)

Yellow Draggable
(reverts)
(scrollings)

Drag Me by the Handle!

Droppable API

A Draggable can be dropped onto a Droppable, and an event will fire.

Syntax

//To create a droppable webkit_drop.add('id_of_element', options)

//To destory webkit_drop.remove('id_of_element')

Options

hoverClass - (string) : the droppable will have this css class when a draggable is hovering over it.
accept - (array) : an array containing acceptable class names of draggables. This droppable will only accept draggables with these class names. If this parameter is not specified, the droppable will accept all draggables.
onDrop - (function) : this function is called when a draggable is released over a droppable. The first parameter will be the droppable element followed by the javascript event.
onOver - (function) : this function is called the moment a draggable is brought over a droppable.
onOut - (function) : this function is called the moment a draggable is brought away from a droppable (after being brought over first).

Examples

//create a droppable that accepts everything and turns white when an droppanle is hoverd over it webkit_drop.add('whitedroppable', {onOver : function(){$('whitedroppable').style.background = '#FFFBC9'}, onOver : function(){$('whitedroppable').style.background = '#FFFFFF'}});

//create a droppable that accepts only accept the yellow droppable, turns white on hover and alerts on drop webkit_drop.add('whitedroppable', {accept : ['yellowbox'], onOver : function(){$('whitedroppable').style.background = '#FFFBC9'}, onDrop : function(){alert('drop')}});

Demo [Only Works on iPad / iPhone]

Drop A Draggable on Me

I Only Like Yellow Droppables

Draggable Click

The Draggable Click class is useful if you want to bind an onclick event onto a draggable. Onclick events will fire when a user has simply tapped but not moved a draggable

Syntax

//To Bind an onclick Event to a draggable element var RC = new webkit_click('id_of_element', {onClick : function(){alert('click')}});

//To dynamically change an existing onlick event access this property RC.setEvent(function(){alert('new event')});

//To stop listening for click event RC.unbind();

Examples

//create draggabe new webkit_draggable('purplebox');

//create clickable new webkit_click('purplebox', {onClick : function(){alert('you clicked me')}});

Demo [Only Works on iPad / iPhone]

Purple Draggable click or drag me

Thanks for Reading

We hope you enjoyed this article. If you did, please retweet this link! Also, remember to check out our webservice gotProject to see some cool drag drop action on an iPad or desktop! Thank you!