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