드래그 가능한 DIV_javascript 기술을 구현하는 Node.js 메소드

시대의 변화에 ​​따라 js의 중요성이 점점 더 커지고 있습니다. js는 웹 페이지(예: Ext 프레임워크)를 만들 수 있을 뿐만 아니라 일부 웹 특수 효과도 만들 수 있습니다. 이러한 특수 효과는 PC에서만 호환되는 것이 아닙니다. , 휴대폰과도 호환됩니다. 결국 브라우저 기반이며 플랫폼과 관련이 없습니다. 이제 js를 사용하여 Microsoft의 windows8 시스템 앱을 개발할 수 있습니다. 시간이 있으면 시도해 볼 수 있습니다.

이제 본론으로 들어가 드래그 가능한 Div의 js 구현에 대해 이야기하겠습니다. 이 기능을 구현하려면 먼저 아이디어에 대해 이야기해 보겠습니다.

1. 마우스 div의 mousedown 이벤트 캡처

2. 문서의 마우스 이동 이벤트 캡처

3. 이벤트 취소

그럼 코드를 살펴보겠습니다.

코드 복사 코드는 다음과 같습니다.

function Drag(id) {
            var $ = function (flag) {
                return document.getElementById(flag);
            }
            $(id).onmousedown = function (e) {
                var d = document;
                var page = {
                    event: function (evt) {
                        var ev = evt || window.event;
                        return ev;
                    },
                    pageX: function (evt) {
                        var e = this.event(evt);
                        return e.pageX || (e.clientX + document.body.scrollLeft - document.body.clientLeft);
                    },
                    pageY: function (evt) {
                        var e = this.event(evt);
                        return e.pageY || (e.clientY + document.body.scrollTop - document.body.clientTop);

                   },
                  layerX: 함수(evt) {
                     var e = this.event(evt);
                        e.layerX 반환 || e.offsetX;
                  },
                  layerY: 기능(evt) {
                    var e = this.event(evt);
                        e.layerY 반환 || e.offsetY;
                  }
              }          
              var x = page.layerX(e);
              var y = page.layerY(e);       
               if (dv.setCapture) {
                   dv.setCapture();
               }
                else if (window.captureEvents) {
                   window.captureEvents(Event.MOUSEMOVE | Event.MOUSEUP);
               }
                d.onmousemove = 기능 (e) {                
                 var tx = page.pageX(e) - x;
                   var ty = page.pageY(e) - y;
                   dv .style.left = tx "px";
                  dv.style.top = ty "px";
               }
              d.onmouseup = 기능 () {
                    if (dv.releaseCapture) {
                      dv.releaseCapture();
                  }
                  else if (window.releaseEvents) {
                      window.releaseEvents(Event.MOUSEMOVE | Event.MOUSEUP);
                   }
                  d.onmousemove = null;
                   d.onmouseup = null;
               }
            }
        }

코드 분석:

1.

div 객체 가져오기

코드 복사 코드는 다음과 같습니다.

var $ = 함수(플래그) {
                                                                                     
이런 코드가 들어있습니다:

코드 복사

코드는 다음과 같습니다. var 페이지 = { 이벤트: 함수(evt) { var ev = evt || window.event;

return ev;

                                    ~ );
                                                                                                                  pageY: 기능(evt) {
                                                                                           var e = this.event(evt);
                                                                                                                                                            Return e.layerX || e.offsetX;
) >             }


그 중 이벤트는 마우스 이벤트인 pageX, pageY를 ​​가져옵니다. 마우스 좌표 가져오기, layerX, layerY 가져오기 마우스와 div 테두리 사이의 거리.

코드도 있습니다:

코드 복사


코드는 다음과 같습니다.

if (dv.setCapture) {
dv.setCapture();
}
else if (window.captureEvent s)                                     window.captureEvents(Event.MOUSEMOVE | 이벤트 . MOUSEUP);
}

div의 MouseMove 및 MouseUp 이벤트를 캡처하는 것입니다. tx를 모르면 온라인으로 확인할 수 있습니다.
3. 문서의 MouseMove 및 mouseUp 이벤트:

코드 복사 코드는 다음과 같습니다.

d.onmousemove = 기능 (e) {                                                                                                                  " px";
dv.style.top = ty "px";
}
d.onmouseup = 함수 () {
If ( dv.releaseCapture) {
dv.releaseCapture() ;
                                                                 ~ ~                                                                                                                     ​마우스 업 = null;
}


tx와 ty는 가장 중요한 코드입니다. div 좌표 설정

어떤 사람들은 왜 -x,-y가냐고 물을 수도 있습니다.

x, y는 빼지 않으면 실제로 마우스와 div 경계 사이의 거리를 얻습니다.

마우스 화살표의 좌표는 div의 x, y 좌표와 동일합니다. 드래그 후 마우스 위치가 왼쪽 상단으로 이동합니다. 드래그 후 바운스되는 효과가 있습니다.

코드 복사

코드는 다음과 같습니다.

if (dv.releaseCapture) {
dv.releaseCapture();
}
        else if (window.releaseEvents)                               ~         마우스업);
}
d.onmousemove = null;
d.onmouseup = null;

마우스가 해제된 후 문서의 onmousemove 및 onmouseup을 취소하는 코드입니다.
저는 최근에 js를 배우고 있는데 앞으로는 여러분과 함께 배우고 발전해 나가기 위해 새로운 경험을 공유하겠습니다.