JQ_简单图片拖动

/*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>

转载于:https://www.cnblogs.com/somesayss/archive/2012/07/12/2588828.html