jq元素拖拽

標籤：code   style   UNC   osi   width   div   cti   pos   height   

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

js

 1 <script type="text/javascript"> 2         $(function(){ 3           $(‘#a1‘).mousedown(function(e){ 4             var positionDiv = $(this).offset(); 5             var distenceX = e.pageX - positionDiv.left; 6             var distenceY = e.pageY - positionDiv.top; 7             $(document).mousemove(function(e){ 8               var x = e.pageX - distenceX; 9               var y = e.pageY - distenceY;10               if(x<0){11                 x=0;12               }else if(x>$(document).width()-$(‘#a1‘).outerWidth(true)){13                 x = $(document).width()-$(‘#a1‘).outerWidth(true);14               }15               if(y<0){16                 y=0;17               }else if(y>$(document).height()-$(‘#a1‘).outerHeight(true)){18                 y = $(document).height()-$(‘#a1‘).outerHeight(true);19               }20               $(‘#a1‘).css({21                 ‘left‘:x+‘px‘,22                 ‘top‘:y+‘px‘23               });24             });25             $(document).mouseup(function(){26               $(document).off(‘mousemove‘);27             });28           });29         });30 31 </script>

 

jq元素拖拽