Home
Last updated
Not interested in the explanation? Go straight to the demo page or download the source code from Github
The more I explore HTML5 the more I feel that a browser based Operating System is coming sooner rather than later. Drag and drop is another important feature that will make this happen. Granted the spec is still work in progress but in Firefox 3.5 there is a workable API that developers can use and build UIs with. For this simple example I’m proposing that a user will want to drag a file to the trash. Later on I might take this further and implement a light client-side database using storage, but for now you can only drag a file to the trash. This example only works in Firefox 3.5
To make an element draggable you can do this.
<li draggable="true" id="file1" ondragstart="drag(this, event)"><span>filename.txt</span></li>
To create a draggable area you can do this.
<div id="trash" ondrop="drop(this, event)" ondragenter="return false" ondragover="return false"></div>
Then you just need a bit of JavaScript to hook it all up
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();
}
The example also features CSS3 (border-radius, box-shadow, text-shadow, rgba) and @font-face embdding with the excellent open source Junction font.
Because I’m a standards zealot I’m not sure about the inline javascript proposed in the spec. There is also a big issue about what happens for users who cannot use the mouse. These are all expected issues though that I hope will be ironed out. Great progress has been made already.
Have an update or suggestion for this article? You can edit it here and send me a pull request.