Topic awaiting preservation: Random Draggable Elements

http://www.rpi.edu/~laporj2/media/code/dragable.html

Wrote this basically since I've never seen it done before. And since it was so simple to make, I am wondering why I've never seen anyone do such a thing...

The code is short, too. To make an object draggable, simply add an onmousedown="drag(this);" event to it, and the script will take care of the rest.

var button  = false;

var mousex  = 0, mousey  = 0;

var offsetx = 0, offsety = 0;

var index   = 0;



document.onmouseup = function(e) { button = false; }



document.onmousemove = function(e) {

	mousex = document.all ? window.event.x : e.pageX;

	mousey = document.all ? window.event.y : e.pageY;



	if(button) {

		button.style.left   = mousex + offsetx;

		button.style.top    = mousey + offsety;

	}

}



function drag(item) {

	item.style.zIndex = ++index;



	button  = item;

	offsetx = parseInt(item.style.left, 10) - mousex;

	offsety = parseInt(item.style.top, 10) - mousey;

}

Enjoy!

"Any sufficiently advanced technology is indistinguishable from magic." -- Arthur C. Clarke
"Any sufficiently arcane magic is indistinguishable from technology." -- P. David Lebling

(Edited by Iron Wallaby on 11-30-2004 23:05)

(Edited by Iron Wallaby on 12-01-2004 01:16)

Nice. I'd move the zIndex line into the drag() function, so that (a) clicking an element brings it to the front, and (b) you're not incrementing the index variable like crazy.

By the way, what year are you graduating?


 

You are indeed correct; it's more efficient in general and looks nicer. It's updated now.

As for your question, I will graduate in the spring of 2007.

"Any sufficiently advanced technology is indistinguishable from magic." -- Arthur C. Clarke
"Any sufficiently arcane magic is indistinguishable from technology." -- P. David Lebling

quote:

---

Iron Wallaby said:

Wrote this basically since I've never seen it done before.

---

I remember the first practical application of JS drag code I saw. It was about 3 years ago, and was the "Dress Up Jesus" website.

3 years on, the site has moved, but still used JS code (albeit some Macromedia code) for dragging. Oh... and it's fun, too

http://www.jesusdressup.com

Dan

(Edited by BillyRayPreachersSon on 12-02-2004 02:50)