jq元素拖拽

Posted 2021-01-17 hermitks

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