Draggable photos (it is possible, but...)

[plympton]

I'm trying to make my photos draggable - not really great for small sizes, but when it's larger than the screen, it's quite handy.

Good news: I got it to work, and it's easy.

Bad news: I got it to work, but on exactly the photos I *DON'T* want it to. :-(. Anyone care to help?

Here's the example:
http://plympton.smugmug.com/gallery/3469220

You can drag the photos around (I haven't found out how to cancel the up-click event after the photo has been dragged). When I view the original size, however, I don't have the correct image item (it's a by-class selection). As far as I can tell, all the images are of class "imgBorder"

Here's the code you need:

Put this in your CSS (optional):
.imgBorder {
position:relative;
cursor:hand;
z-index: 1;
}

Put this in your Javascript (apparently you can't type function without the fu icon?)

/***********************************************
* Drag and Drop Script: © Dynamic Drive (http://www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit http://www.dynamicdrive.com/ for this script and 100s more.
***********************************************/
var dragobject={
z: 0, x: 0, y: 0, offsetx : null, offsety : null, targetobj : null, dragapproved : 0,
initialize:function(){
document.onmousedown=this.drag
document.onmouseup=function(){
this.nodrag;
event.returnValue=false;
if (this.dragapproved==1) {
//alert("X: " + this.targetobj.style.left + " Y: " + this.targetobj.style.top);
this.dragapproved=0
}
}
},
drag:function(e){
var evtobj=window.event? window.event : e
this.targetobj=window.event? event.srcElement : e.target
if (this.targetobj.className=="imgBorder"){
this.dragapproved=1
if (isNaN(parseInt(this.targetobj.style.left))){this. targetobj.style.left=0}
if (isNaN(parseInt(this.targetobj.style.top))){this.t argetobj.style.top=0}
this.offsetx=parseInt(this.targetobj.style.left)
this.offsety=parseInt(this.targetobj.style.top)
this.x=evtobj.clientX
this.y=evtobj.clientY
if (evtobj.preventDefault)
evtobj.preventDefault()
document.onmousemove=dragobject.moveit
}
},
moveit:function(e){
var evtobj=window.event? window.event : e
if (this.dragapproved==1){
this.targetobj.style.left=this.offsetx+evtobj.clie ntX-this.x+"px"
this.targetobj.style.top=this.offsety+evtobj.clien tY-this.y+"px"
return false
}
}
}
dragobject.initialize();