[philiptellis] /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.

To start, download Yahoo's yui utilities:
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);
javascript:void(_s=document.createElement("script"), _s.src="adddragdrop.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),
_s=document.createElement("script"), _s.src="http://localhost/philip/yui/adddragdrop.js",
_s.onload=_s.onreadystatechange = function(){alert(add_drag_drop("div"));},
document.body.appendChild(_s))'>Add drag drop to page</a>
(Whitespace added for readability)

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.

14 comments :

BG
February 16, 2006 4:32 PM

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
February 16, 2006 10:48 PM

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
February 17, 2006 4:41 AM

That was a very cool demo, G0SUB

Vasu
February 17, 2006 4:48 AM

GOSU: Coolness!

Mikhail Esteves
February 17, 2006 4:59 AM

Niceness! :)

t3rmin4t0r
February 17, 2006 10:18 AM

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
February 24, 2006 1:32 PM

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

Blues
February 24, 2006 1:58 PM

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
March 14, 2007 2:51 AM

Nice !! Whole Yahoo Homepage disintefrated,cool Fun

Beben
February 25, 2010 1:43 PM

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

Beben
February 25, 2010 1:56 PM

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

Blues
February 25, 2010 1:59 PM

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
February 27, 2010 6:54 PM

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

Blues
March 25, 2010 7:17 PM

Here: http://tech.bluesmoon.info/2008/10/add-drag-and-drop-to-any-website-yui26.html

Post a Comment

...===...