# The other side of the moon

/bb|[^b]{2}/
Never stop Grokking

## Thursday, February 16, 2006

### Add drag and drop to any website

Have you ever visited a website and wondered, "Man, I wish I could drag that stuff out of the way"? Well, it really shouldn't be that hard. I've been doing this for a while on my own, and thought I'd share it.

To make it easy to use, I'd suggest you make a bookmarklet out of it that can be clicked on when you get to a page.

Zip file. Unzip it into a convenient directory on your computer.
For this particular hack, I'd suggest putting the following files into the same directory:
• YAHOO.js - from any of the subdirectories
• event/build/event.js
• dom/build/dom.js
• dragdrop/build/dragdrop.js
Next, create your own script file, that looks like this:
function add_drag_drop(element)
{
if(!element)
element="div";
var divs = document.getElementsByTagName(element);
for(var i=0; i<divs.length; i++)
{
var id = "div-" + i;
if(divs[i].id)
id=divs[i].id;
else
divs[i].id = id;

var dd = new YAHOO.util.DD(id);
}

return "Added drag-drop to " + i + " " + element + "s";
}

I'll call it adddragdrop.js. Use a javascript prompt at the top instead if you'd like to be prompted for the element's tag name.

The only thing this function does is iterate through all elements of the specified type, adding drag drop to them. If elements don't have an id, an id is added. Notice that it takes more lines of code to add ids than it does to add drag and drop. That's why I love this library.

You now need to add these five files to the page you're viewing. You can do it via the browser URL bar like this:
javascript:void(_s=document.createElement("script"), _s.src="YAHOO.js", document.body.appendChild(_s);
javascript:void(_s=document.createElement("script"), _s.src="event.js", document.body.appendChild(_s);
javascript:void(_s=document.createElement("script"), _s.src="dom.js", document.body.appendChild(_s);
javascript:void(_s=document.createElement("script"), _s.src="dragdrop.js", document.body.appendChild(_s);

Of course, use the correct path for the files in there.

Finally, call the function from your url bar like this:
javascript:alert(add_drag_drop('div'))

All <div>s on the page should now be draggable.

Ok, so it's a pain to do this over and over, so turn it into a bookmarklet or greasemonkey script. This is what
my bookmarklet looks like:
<a href='javascript:void(
_s=document.createElement("script"), _s.src="http://localhost/philip/yui/YAHOO.js", document.body.appendChild(_s),
_s=document.createElement("script"), _s.src="http://localhost/philip/yui/event.js", document.body.appendChild(_s),
_s=document.createElement("script"), _s.src="http://localhost/philip/yui/dom.js", document.body.appendChild(_s),
_s=document.createElement("script"), _s.src="http://localhost/philip/yui/dragdrop.js", document.body.appendChild(_s),


Drag that link to your bookmarks toolbar to make it easily accessible, and of course, change the links to point to your own versions of the files.

Ok, we're ready to go now. Visit any page, click on the bookmarklet, and all divs become draggable. Is that cool or what?

If it doesn't work, let me know and I'll try and figure it out.

Anyway, now that you've got the code, play with it and show me what you can do.

BG

bluesmoon!
It works like a charm here. A greasemonkey script to add this to arbit websites would be uber cool.
The page where I tested it is here --
http://freeshell.in/~ghoseb/bg/test.html

--
G0SUB

Premshree Pillai

G0SUB: The advantage of having a bookmarklet (in this case) is that the user can decide whether he wants to add drag-n-drop or not. With Greasemonkey, you'll have a fixed set of rules in the script that'd do that for you.

code_martial

That was a very cool demo, G0SUB

Vasu

GOSU: Coolness!

Mikhail Esteves

Niceness! :)

t3rmin4t0r

If you want, you can link off

http://t3.dotgnu.info/code/yui/

I've got a 12 gig upload limit, but I don't think this will hit that hard :)

Paul Irish

i definitely second BG's idea.. . this needs to be a greasemonkey script.

Blues

If anyone writes it up as a greasemonkey script, I'll link to it. My only problem with making it one is that it makes text non-selectable.

Neone

Nice !! Whole Yahoo Homepage disintefrated,cool Fun

Beben

i'll have try it in my blog...
awesome...hohohoho

Beben

how we can add a button for reset this hack???...back to normal like that???

Blues

you can't. you need to refresh the page. BTW, you should be using the newer version of this hack. This version is very old.

Beben

where is i can get new version...xixixixi
i am not understand about script, i am just a uder...:D

Blues