HomeHTML 5 and the Ability of Drag and Drop Events
The more I explore HTML5 the more I feel that a browser based Operating System is coming sooner…
Links: HTML5 Drag and Drop Working Draft, Drag and Drop – MDC
1. To make an element draggable in HTML 5:
<li draggable="true" id="file1" ondragstart="drag(this, event)"><span>filename.txt</span></li>
2. To create a draggable area you can do this:
<div id="trash" ondrop="drop(this, event)" ondragenter="return false" ondragover="return false"></div>
3. Then you just need a bit of JavaScript:
function drag(target, e) {
e.dataTransfer.setData('Text', target.id);
}
function drop(target, e) {
var id = e.dataTransfer.getData('Text');
target.appendChild(document.getElementById(id));
e.preventDefault();
}
Related Posts
Share
Tags: CSS, How-To, Html, Javascript
Subscribe to the Dailies