This is what my script looks like:

PHP Code:

var isGrabbed = null;

function coordX(){
    if(document.onmousemove.pageX){
        return document.onmousemove.pageX;
    }
    return document.onmousemove.clientX;
}

function coordY(){
    if(document.onmousemove.pageY){
        return document.onmousemove.pageY;
    }
    return document.onmousemove.clientY;
}

function grabImg() {
    isGrabbed = "yes";
}

function dragImg() {
    if (isGrabbed == "yes") {
        document.getElementById("wu").style.left=coordX()-25+"px";
        document.getElementById("wu").style.top=coordY()-25+"px";
    } else {
        setTimeout("dragImg()", 25);
    }
}

function dropImg() {
    isGrabbed = null;
} 


and this is what the html looks like:

<img src="wutang.jpg" alt="Drag me!" title="Drag me!" id="wu" onmousedown="grabImg()" onmouseup="dropImg()" onmousemove="dragImg()" />

but it doesn't work, and I have tried at least ten different things, but none seem to work. What am I missing? Thanks to everyone, I'm very frustrated right now.

I suggest downloading jQuery and using that instead.
It's absolutely brilliant.

If you don't want to do that but want to stick with your old code, I suggest you put in some alerts at certain places to check if the variables you are using are working properly.

I'll post some code here when I get a chance.

-Moatist

Try this:

(paste into head):

<script type="text/javascript"> 
	//initiate variables
	var element;
	var DragNow = false;
	var dx=0;
	var dy=0;
	
	function initDrag(e)
	{	
		e = (e)? e : event;
		
		DragNow = true;
		
		//
		dx = Math.abs(parseInt(element.style.left) - e.clientX);
		dy = Math.abs(parseInt(element.style.top) - e.clientY);
		
		//declare mousemove and mouseup event
		document.onmousemove = startDrag;
		document.onmouseup = stopDrag;
	}
 
	function stopDrag()
	{
		DragNow = false;
	}
	
	function startDrag(e)
	{
		e = (e)? e : event;
		if(DragNow)
		{
			element.style.top = (e.clientY - dy) + 'px';
			element.style.left = (e.clientX - dx) + 'px';
		}
	}
	
	window.onload = function()
	{
	  //set the draggable element
	  element = document.getElementById("ball"); //i.e: document.getElementById("pic")
	  
	  //initiate mousedown event
	  element.onmousedown = initDrag;
	}
</script>

(paste into body):

<div id="pic" style="left:0;top:0;position:absolute;width:306px;height:174px;background-image:url('image.jpg');"> </div>

The code is not perfect, but it is cross-browser compliment.

You may have some trouble, depending on your needs, with the div starting out in the top-left corner. This can be modified but absolute-positioning is necessary.

-Moatist