드래그 앤 드롭 effect_javascript 기술을 달성하기 위한 js

window.onload = 함수(){
// 요소와 초기값을 가져옵니다
var oBox = document.getElementById('box'),
          disX = 0, disY = 0;
//컨테이너 마우스 누르기 이벤트
oBox.onmousedown = 함수 (e){
        var e = e || window.event;
          disX = e.clientX - this.offsetLeft;
         disY = e.clientY - this.offsetTop;
          document.onmousemove = 기능 (e){
            var e = e || window.event;
oBox.style.left = (e.clientX - disX) 'px';
oBox.style.top = (e.clientY - disY) 'px';
        };
          document.onmouseup = 함수(){
                document.onmousemove = null;
               document.onmouseup = null;
        };
         false를 반환합니다.
};
};

window.onload = 함수(){
var drag = new Drag('box');
Drag.init();
};
//생성자 드래그
함수 드래그(id){
This.obj = document.getElementById(id);
This.disX = 0;
This.disY = 0;
}
Drag.prototype.init = 함수 (){
// 이 포인터
var me = this;
This.obj.onmousedown = 함수 (e){
        var e = e ||          me.mouseDown(e);
​​​​ //기본 이벤트 차단
         false를 반환합니다.
};
};
Drag.prototype.mouseDown = 함수 (e){
// 이 포인터
var me = this;
This.disX = e.clientX - this.obj.offsetLeft;
This.disY = e.clientY - this.obj.offsetTop;
Document.onmousemove = 함수 (e){
        var e = e || window.event;
         me.mouseMove(e);
}; Document.onmouseup = 함수(){
         me.mouseUp();
}
};
Drag.prototype.mouseMove = 함수 (e){
This.obj.style.left = (e.clientX - this.disX) 'px';
This.obj.style.top = (e.clientY - this.disY) 'px';
};
Drag.prototype.mouseUp = 함수 (){
Document.onmousemove = null;
Document.onmouseup = null;
};