Please login or register. Welcome to the Studio, guest!


Quick Links:


newBookmarkLockedFalling

Zero Tolerance

Zero Tolerance Avatar

*
New Member

21


October 2005
This class will add availability to drag/drop any element on a page, simply include this code into your header:
document.dragObject = false
document.mousepos   = new Array
zIndex              = 100

DragObject = function()
{
if (arguments.length > 1)
{
for (a = 0; a < arguments.length; a++)
{
new DragObject(arguments[a])
}

return false
}

if (document.getElementById(arguments[0]))
{
this.id     = arguments[0]
this.object = document.getElementById(this.id)
this.object.onclick     = function(){return this.beginDrag}
this.object.onmousedown = this.beginDrag
this.object.onmouseup   = this.stopDrag
this.object.className   = 'dO'
}
}

DragObject.prototype.beginDrag = function()
{
document.dragObject = this.id
return false
}

DragObject.prototype.stopDrag = function()
{
if (document.getElementById(document.dragObject))
{
document.getElementById(document.dragObject).className = 'dO'
document.getElementById(document.dragObject).style.zIndex = ++zIndex
}
document.dragObject = false
}

ddMM = function()
{
e = arguments[0]

try
{
document.mouse_x = e.clientX
document.mouse_y = e.clientY
}
catch(e)
{
try
{
document.mouse_x = window.event.x + document.body.scrollLeft
document.mouse_y = window.event.y + document.body.scrollTop
}
catch(e)
{
try
{
        document.mouse_x = e.pageX
        document.mouse_y = e.pageY
}
catch(e)
{
alert('Could not initiate mouse movements, please report.')
return false
}
}
}

if (document.dragObject !== false)
{
dO = document.getElementById(document.dragObject)
dO.className      = 'dO_Drag'
dO.style.position = 'absolute'
dO.style.left     = document.mouse_x - (dO.offsetWidth  / 2)  + 'px'
dO.style.top      = document.mouse_y - (dO.offsetHeight / 2) + 'px'
}
}

try
{
document.captureEvents(Event.MOUSEMOVE)
document.onmousemove = ddMM
}
catch(e)
{
try
{
document.onmousemove = ddMM
}
catch(e)
{
alert('Could not initiate mousemove')
}
}

rfalse = function()
{
return false
}


For example:
<img src='http://gzevolution.net/pic/sk_avy.jpg' alt='' id='dobj' ondrag='return rfalse()' />

Ensure the drag element has an id, and this: ondrag='return rfalse()'

Next, in javascript:
new DragObject('dobj')

To make multiple drag elements:
new DragObject('dobj', 'dobjb', 'dobjc')

And lastly, this css is optional, and can be customized to your own needs:
<style type='text/css'>
<!--
.dO
{
cursor: hand;
}

.dO_Drag
{
cursor: hand;
filter:alpha(opacity=40);
-moz-opacity: 0.4;
}
-->
</style>


Might be useful, I have yet to find a use yet though =P

- Zero Tolerance


Last Edit: Nov 5, 2005 13:58:01 GMT by Zero Tolerance

crazynarutard

crazynarutard Avatar

*****
Senior Studio Member

1,470


August 2005
I saw that drag/drop image of yours ages ago :P

Good job ;)

Chris

Chris Avatar

******
Head Coder

19,519


June 2005
....This scares me. :P

What exactly does catch() and try do?

Eric

Eric Avatar



1,442


November 2005
cddude229 said:
....This scares me. :P

What exactly does catch() and try do?

That's part of the try... catch system. Should what is executing in the try fail, it will go to the catch.

Good job ZT, I see you made it crossbrowser.

Singular

Singular Avatar
v4 Studios :: Coming Soon

***
Dedicated Member

238


September 2005
I dont get it? It doesn't work for me? :P
Further Solutions :: Hosting :: Scripts :: Templates
furthersolutions.com

v4 Studios - Coming soon

Chris

Chris Avatar

******
Head Coder

19,519


June 2005
iycatacombs.com/sz/zts_drag_drop.html

Works fine for me in IE and FF. :P

crazynarutard

crazynarutard Avatar

*****
Senior Studio Member

1,470


August 2005
I dig the opacity change :P

Zero Tolerance

Zero Tolerance Avatar

*
New Member

21


October 2005
The try/catch is basically an attempt to execute code without failing, for instance, if a browser doesn't support code within the try execution, it will continue without stopping due to errors, if a catch is added it will execute that on failure, mainly used for crowss browser really.

Anyhow, glad people like it, let me know if you can find a use for it.

- Zero Tolerance

Singular

Singular Avatar
v4 Studios :: Coming Soon

***
Dedicated Member

238


September 2005
Wow! That script is really good! I may make somthing out of this... :P
Further Solutions :: Hosting :: Scripts :: Templates
furthersolutions.com

v4 Studios - Coming soon

Chris

Chris Avatar

******
Head Coder

19,519


June 2005
Ah.... That makes sense. Then one last question, what's with the parameter "e" in catch()?

crazynarutard

crazynarutard Avatar

*****
Senior Studio Member

1,470


August 2005
cddude229 said:
Ah.... That makes sense. Then one last question, what's with the parameter "e" in catch()?

that's the event :P

hpmad

hpmad Avatar



858


September 2005
O_o That is nice!!! I like the opacity thing.s

Singular

Singular Avatar
v4 Studios :: Coming Soon

***
Dedicated Member

238


September 2005
Yeah. How hard was it to make?

BTW: hp.mad_, check your PMs at CF. :P
Further Solutions :: Hosting :: Scripts :: Templates
furthersolutions.com

v4 Studios - Coming soon

Chris

Chris Avatar

******
Head Coder

19,519


June 2005
Its ZT, it was a breeze for him. :P I wouldn't have even known what functions to start with.

hpmad

hpmad Avatar



858


September 2005
g0alieb0y said:
Yeah. How hard was it to make?

BTW: hp.mad_, check your PMs at CF. :P


Ummm not to get off topic here, but: I don't have any new pms :-/ if you send me something, resend it lol.

newBookmarkLockedFalling