This is our effort to share news and knowledge in hopes of gaining a community and increasing interest in our web service.

If you like this article, please check out our web service gotProject? Click the button below to watch a quick 1 minute video to see what it's all about.

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

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

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!