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.
Watch Video about gotProject?  Download JS Library  


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 iPadoriPhone.  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!