jq元素拖拽

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

js

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