jq元素拖拽
阿新 • • 發佈:2018-11-03
<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>