1. 程式人生 > >jq元素拖拽

jq元素拖拽

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