Closed Thread Icon

Topic awaiting preservation: Random Draggable Elements (Page 1 of 1) Pages that link to <a href="https://ozoneasylum.com/backlink?for=24244" title="Pages that link to Topic awaiting preservation: Random Draggable Elements (Page 1 of 1)" rel="nofollow" >Topic awaiting preservation: Random Draggable Elements <span class="small">(Page 1 of 1)</span>\

 
Iron Wallaby
Paranoid (IV) Inmate

From: USA
Insane since: May 2004

posted posted 11-30-2004 23:05

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.

code:
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)

Slime
Lunatic (VI) Mad Scientist

From: Massachusetts, USA
Insane since: Mar 2000

posted posted 11-30-2004 23:28

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?


 

Iron Wallaby
Paranoid (IV) Inmate

From: USA
Insane since: May 2004

posted posted 12-01-2004 01:15

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

BillyRayPreachersSon
Bipolar (III) Inmate

From: London
Insane since: Jul 2004

posted posted 12-02-2004 02:49
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)

« BackwardsOnwards »

Show Forum Drop Down Menu