Drag and drop was something very common for desktop applications and yet rarely found on a web page. Well, a lot of things changed and over the last few years web pages are becoming more and more flexible and functional. Having
faster browsers and lots of big, complicated projects (i.e Gmail) is pushing web masters and coders to offer more and more functionality within their pages. In this article I will show you what is the simplies way to implement a drag and drop interface. I call it 'simpliest', cause that's what it is - the very simple, ugly and primitive way to implement drag and drop. Funny thing is, that drag and drop is so commonly mistaken for something so hard to accomplish, that a lot of people are scared to even think about implementing it. Here I'll show you how with as little as 10-15 lines of code you can have drag and drop, working on each and every element on your page.
First, we need to get the dragged element and store it somewhere. This will be triggered by a onmousedown event:
//this will store the object that is currently being dragged
var dragged_item = false;
//get the element that is being dragged
function get(elmnt)
{
//simply save the element (not it id or something - the whole HTML element) into our global var
window.dragged_item = elmnt;
}
Now we can simply add a
onmousedown='get(this);' to any object that we want to be able to drag and drop. Having the element in window.draged_item we can 'drop' it somewhere else:
//drop the element in it's new spot.
function drop(elmnt)
{
//what we do is access the parent node of the dragged element and remove the element from it.
//this line works for all objects, no matter if they are part of the whole page (window object) or any other element within the page
window.dragged_item.parentNode.removeChild(window.dragged_item);
//then append the dragged item to it's new parent element
elmnt.appendChild(window.dragged_item);
}
Now all we need to do is add a
onmouseup='drop(this);' event trigger to every object on the page where we want to be able to drop stuff into. Voila, actually this simple two functions are enough for a drag and drop functionality. However, I will add something else to make things a bit better:
//when the user release the mouse anywhere on the page we need to drop the object.
//creating this global onmouseup event always clears the currently dragged element
window.onmouseup = function()
{
window.draged_item = false;
}
Not having this global onmouseup trigger will cause the elements to be dragged forever. The user can actually click the mouse somewhere on a blank space within the page, but he will still be able to drop the element once he clicks on another element, which has a
onmouseup='drop(this);' trigger.. Creating the global function handles that and makes sure that when the user has released the mouse button the element will be droped, either onto it's new location, or into it's old.
That's it for now, I'll surely write more about the subject. Soon I will show you how to actually drag the element on the page, not just imagine that it is being dragged :) You can see two demos of the above code. In the first one I use some div elements. It can be seen
here.
In the
second demo I use some unordered lists. In this demo you can see what I mean by ugly drag and drop - you can drag the list elements from one list to another, but while doing it you select some of the text, some of it is still selected when you drop the element, etc, etc. Next time I will show you how to fix this issues.
Posts
