HTML源代码

CSS源代码

*{
       margin: 0;    padding:0;}div{
       width: 100px;    height: 100px;    background: #f00;    cursor: pointer;    position: absolute;    left: 0;    top: 0;}

JS源代码 

$(function(){    $('div').mousedown(function(e){        //offset()在匹配的元素集合中，获取的第一个元素的当前坐标，坐标相对于文档        var positionDiv = $(this).offset();        var distenceX = e.pageX - positionDiv.left;        var distenceY = e.pageY - positionDiv.top;        // alert(positionDiv.left);        $(document).mousemove(function(e) {        var x = e.pageX - distenceX;        var y = e.pageY - distenceY;        //防止将元素拖拽出浏览器窗口        if(x<0){            x=0;        }else if(x>$(document).width()-$('div').outerWidth(true)){            x=$(document).width()-$('div').outerWidth(true);        }        if(y<0){            y=0        }else if(y>$(document).height()-$('div').outerHeight(true)){            y=$(document).height()-$('div').outerHeight(true);        }        $('div').css({            'left':x+'px',            'top':y+'px'        });    });    $(document).mouseup(function() {        //unbind和off都可以解除绑定时间        $(document).unbind('mousemove');    });    });});