I have a movable div with a background Position offset. When the Div is moved around I update the background offsets to generate an interesting effect on my site.

Here's the proble: The javascript is updating the background offset but the browser is only updating the background image of the div on the initial click. Is there a way I can force the browser to redraw the divs background?

I've attached the code below if it will help, Thanks.


HTML Code:
var moving=false;
var dragapproved=false;
var initialX=0;
var initialY=0;
var offsetX;
var offsetY;
var mObj;
	
function initializedrag(moveObj) {
	offsetX=event.clientX;
	offsetY=event.clientY;
	initialX = document.getElementById(moveObj).offsetLeft;
	initialY = document.getElementById(moveObj).offsetTop;
	dragapproved=true;
	document.body.onmousemove=drag_drop;
	mObj = moveObj;
}
	
function drag_drop(e) {
	if (dragapproved) {
		document.getElementById(mObj).style.left=initialX+event.clientX-offsetX+"px"
		document.getElementById(mObj).style.top=initialY+event.clientY-offsetY+"px"
		document.getElementById(mObj).style.display = "none";
		document.getElementById(mObj).style.backgroundPositionX = (initialX * -1) + 10;
document.getElementById(mObj).style.backgroundPositionY = (initialY * -1) + 15;
	}
}
			
function stopdrag() {
	dragapproved=false;
	document.body.onmousemove=null;
}