I've done some research about HTML5 APIs, today I want to show you the Drag and Drop.
It's pretty cool and best of all works in all major browsers!
So I've built a simple demo playing with containers and HTML data attributes. We'll retrieve the containers attributes once we drop them in the drop zone.
Let's get into it.
Fairly simple HTML, all you need is the drop zone and the draggable items:
<div id="drop"></div> <div draggable="true" class="dragable-item" data-title="Box 1" data-price="200">1</div>Code language: HTML, XML (xml)
Here comes the juicy part. Basically what we want to do is add event listeners to the draggable items and to the drop zone.
We'll use callback functions to create actions when the items are dropped inside the drop zone.
What I've done with the demo is retrieve the data attributes and print them inside the drop zone (check the Demo page source code for full details)
What about mobile?
HTML5 got you covered! There are touch events ready to boost your code on mobile devices.
Check out the full list on HTML5 Rocks.
Unfortunately I haven't been able to completely adapt this demo for touch devices, I'll update as soon as I can.