jQuery,div 마우스 따라 이동

중요 한 것 은 마우스 의 현재 위치 와 이동 후의 위 치 를 어떻게 얻 는 지,div 의 현재 위치 와 이동 후의 위 치 를 파악 하 는 것 이다.
jQuery 로 div 가 마우스 자체 위치 가 아 닌 마우스 이동 을 실현 합 니 다!!div 의 이전 위치 이동 입 니 다.
코드 는 다음 과 같 습 니 다.(녹색 부분의 해석 을 주의 하 세 요)

<!DOCTYPE html>
<html>
 <head>
  <meta charset="{utf-8}">
  <title></title>
  <script src="../jquery-3.2.0.js"></script>
  <style>
   .aa{
    height: 100px;
    width: 200px;
    position: absolute;
    background-color: green;
   }
  </style>
 </head>
 <body>
  <div class="aa"></div>
 </body>
</html>
<script>
 $(".aa").mousedown(function(e){
  //          
  var endx=0;
  var endy=0;

  //  div     ,          ,       px
  var left= parseInt($(".aa").css("left"));
  var top = parseInt($(".aa").css("top"));

  //          ,      es.pageX,es.pageY
  var downx=e.pageX;
  var downy=e.pageY;  //pageY y   ,    !!

  //       div   
 $(".aa").bind("mousemove",function(es){

  //es.pageX,es.pageY:          
  var endx= es.pageX-downx+left;  //  div     
  var endy=es.pageY-downy+top;

  //    
  $(".aa").css("left",endx+"px").css("top",endy+"px") 
 }); 
 })
 

 $(".aa").mouseup(function(){
  //      div    
  $(".aa").unbind("mousemove")
 })
 
</script>
다음 코드 와 구별:(최종 실현 효 과 는 div 가 마우스 위치 에 따라 이동 하 는 것 입 니 다.구체 적 인 효 과 는 붙 여 넣 고 복사 할 수 있 습 니 다.차이 가 어디 에 있 는 지 비교 해 보 세 요)

 <script>
$(".aa").mousedown(function(e){
 $(document).bind("mousemove",function(e){
  $(".aa").css("left",e.pageX).css("top",e.pageY)
 });
})
 $(".aa").mouseup(function(){
  $(document).unbind("mousemove")
 })
 </script>
이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.

좋은 웹페이지 즐겨찾기