js 드래그 효과 구현 (구조 함수)

1. 구조 함수 모델 을 이용 하여 개발 하 는 장점
1. 업무 논리 적 사고 가 더욱 뚜렷 하 다.
2. 대량의 전역 변수의 발생 을 피 했 고 하나의 전역 변수 만 있 으 며 이 기능 모듈 이 밖으로 노출 되 는 유일한 인터페이스 에 해당 한다.
      3. 모듈 화 개발 과 결합 하면 사용자 정의 모듈 을 통일 modules 에 추가 할 수 있 습 니 다. 사용자 정의 모듈 이름 이 충돌 하지 않 으 면 서로 간섭 하지 않 습 니 다.
      4. 코드 는 유지 가능성 이 좋 고 남 을 이 롭 게 하 며 자신 을 이 롭 게 한다.
2. 다음은 이 모델 을 이용 하여 끌 어 당 기 는 것 을 사례 로 설명 합 니 다.1. html, 다음 과 같 음:

2、css

3、js

//   Drag    ，            （                    ）；
function Drag(bar, target) {
  //    bar           ；
  this.bar = bar;

  //    target           ；
  this.target = target;

  //   flag        ，            ；
  this.flag = false;
}
//            ，                ；
Drag.prototype = {
  //        constructor  ，              ；           ，    。。。
  constructor : Drag,

  //           ，         ；
  init : function(){
    //    this        init         ，           ；
    //       ，                 ；
    var temp = this;

    //                ，    left top  ；
    temp.left = temp.getCss(temp.target, "left");
    temp.top = temp.getCss(temp.target, "top");

    //            ，                        （clientX、clientY）
    temp.mousePosX = null;
    temp.mousePosY = null;

    //               ；
    temp.bindEvent();
  },
  //
  getCss : function(o , prop){
    // Dom   style                  ，  ，             ；
    //                      ，          ，currentStyle    Ie，            ；
    return o.currentStyle ? o.currentStyle[prop] : document.defaultView.getComputedStyle(o, null)[prop];
  },
  bindEvent : function(){
    //       bindEvent   this  （            ）   temp  ，  temp         ；
    //   ，           ，          ，      this ，     this          ；
    //   ，             ，       this           ，              “this”
    var temp = this;

    //            
    temp.bar.onmousedown = function(e){
      //    e      ， Ie      ，   window.event   ；
      e = e || window.event;

      //              ，         ；
      temp.flag = true;

      //                ，          mousePos  ；
      temp.mousePosX = e.clientX;
      temp.mousePosY = e.clientY;
    };

    //         ，       document      ，            ；
    //      onmousemove      ，            ，      ，                  ；
    document.addEventListener('mousemove' ,function(e){
      e = e || window.event;

      //           ，    flag true ，           ；
      //           ，         ，             ；
      if(temp.flag){

        // （e.clientX - temp.mousePosX）              ；
        // parseInt(temp.left)         ，          ；
        temp.target.style.left = parseInt(temp.left) + e.clientX - temp.mousePosX + "px";
        temp.target.style.top = parseInt(temp.top) + e.clientY - temp.mousePosY + "px";
      }
    });

    //        
    document.addEventListener('mouseup', function(e){
      //      ，       ，             ；
      temp.flag = false;

      //                
      temp.left = temp.getCss(temp.target, "left");
      temp.top = temp.getCss(temp.target, "top");
    });
  }
}

//   Dom  ，oBar     ，oBox         ；
var oBox = document.getElementsByClassName('box');
var oBar = document.getElementsByClassName('bar');
//       ，      ；
var drag1 = new Drag(oBar[0], oBox[0]);
var drag2 = new Drag(oBar[1], oBox[1]);
var drag3 = new Drag(oBar[2], oBox[2]);
//         init  ，               ；
drag1.init();
drag2.init();
drag3.init();

구체 적 인 과정 은 모두 js 주석 을 통 해 설명 되 었 으 니 구조 함 수 를 잘 이용 하여 끌 어 당 기 는 효 과 를 실현 하 는 데 도움 이 되 기 를 바 랍 니 다.