/*jq*/
var imgDrag = function(a,b){
var fazhiX = $(a).width()-$(b).width();
var fazhiY = $(a).height()-$(b).height();
$(a).mousedown(function(e){
var oldX = e.pageX;
var oldY = e.pageY;
var imgX = $(b).position().left;
var imgY = $(b).position().top;
$(this).addClass("on");
$(document).mousemove(function(e){
var x = (e.pageX - oldX)+imgX;
var y = (e.pageY - oldY)+imgY;
if(x>0){x=0;}
if(y>0){y=0;}
if(x<fazhiX){x=fazhiX;}
if(y<fazhiY){y=fazhiY;}
$(b).css({"left":x,"top":y})
})
e.preventDefault();
$(this).mousemove(function(e){
if(!window.event){return};
window.event.returnValue=false
})
});
$(a).mouseup(function(){
$(this).removeClass("on");
$(document).unbind("mousemove")
});
$(a).mouseout(function(){
$(this).removeClass("on");
})
$(document).mouseup(function(){
$(document).unbind("mousemove");
})
}
/*CSS*/
.main{width:500px;height:500px;border:1px solid #CCC;margin:50px auto 0 auto;overflow:hidden;position:relative;cursor:-moz-grab;cursor:url(http://api.map.baidu.com/images/openhand.cur),default;}
.imgRun{position:absolute;top:0;left:0;}
.on{cursor:-moz-grabbing;cursor:url(http://api.map.baidu.com/images/closedhand.cur),default;}
/*html*/
<div id="main" class="main">
<div id="imgRun" class="imgRun"><img src="img/11.jpg"/></div>
</div>