jq元素拖拽效果

<div id="a1"></div>

<script type="text/javascript">
        $(function(){
          $('#a1').mousedown(function(e){
            var positionDiv = $(this).offset();
            var distenceX = e.pageX - positionDiv.left;
            var distenceY = e.pageY - positionDiv.top;
            $(document).mousemove(function(e){
              var x = e.pageX - distenceX;
              var y = e.pageY - distenceY;
              if(x<0){
                x=0;
              }else if(x>$(document).width()-$('#a1').outerWidth(true)){
                x = $(document).width()-$('#a1').outerWidth(true);
              }
              if(y<0){
                y=0;
              }else if(y>$(document).height()-$('#a1').outerHeight(true)){
                y = $(document).height()-$('#a1').outerHeight(true);
              }
              $('#a1').css({
                'left':x+'px',
                'top':y+'px'
              });
            });
            $(document).mouseup(function(){
              $(document).off('mousemove');
            });
          });
        });

</script>