이 기사는 기본 JavaScript에서 요소 드래그의 구현을 소개합니다.
아이디어 :
1. 먼저 드래그 된 요소의 레이아웃 속성을 변경하면 키는 "위치 : 절대"입니다.
2. 마우스 이벤트 "Mousedown", "MouseMove", "MouseUp"을 포착합니다.
3. "Mousedown"이 트리거되면, 요소 _x, _y에서 전류 마우스의 상대 위치를 기록하십시오.
4. 그런 다음 "MouseMove"이벤트를 처리하고 요소의 상단 및 왼쪽 속성을 변경하여 요소를 이동하십시오.
5. "마우스 업"시간이 트리거되면 드래그를 중지하십시오.
동시에 코드 및 브라우저 호환성의 캡슐화를 고려해야합니다. 코드는 다음과 같습니다.
<! doctype html> <html> <head> <title> draggable div </title> <스타일 유형 = "text/css"> body {margin : 0; 패딩 : 0; 배경색 : #fff; } #drag_div {너비 : 150px; 높이 : 150px; 패딩 : 10px; 여백 : 10px; 배경색 : #66dd33; 커서 : 이동; } </style> </head> </html> <body> <div id = "drag_div"> </div> </body> <script type = "text/javascript"> function drag () {this.initialize.apply (this, arguments); } drag.prototype = {// 초기화 초기화 : 함수 (요소, 옵션) {this.element = this. $ (요소); // 객체가 드래그되는 객체 ._x = this._y = 0; // 요소의 마우스 위치 this._movedRag = this.bind (this, this.MovedRag); this._stopdrag = this.bind (this, this.stopdrag); // 매개 변수를 설정 this.setOptions (옵션); // 마우스로 "핸들"객체를 "드래그"로 설정합니다 (드래그중인 객체의 차이점) this.handle = this. $ (this.options.handle); // 콜백 함수를 설정 this.onstart = this.options.onstart; this.onmove = this.options.onmove; this.onstop = this.options.onstop; this.handle.style.cursor = "Move"; this.changelayout (); // 시작 드래그 이벤트를 등록하십시오. }, // 드래그 대상 객체의 레이아웃 속성을 변경합니다. this.element.style.left = this.element.offsetleft + "px"; this.element.style.position = "절대"; this.element.style.margin = "0"; }, startDrag : function (event) {var event = event || Window.event; this._x = event.clientx- this.element.offsetleft; this._y = event.clienty- this.element.offsetTop; this.addhandler (문서, "mousemove", this._movedrag); this.addhandler (문서, "마우스 업", this._stopdrag); this.preventDefault (이벤트); this.handle.setcapture && this.handle.setcapture (); this.onstart (); }, mizedrag : function (event) {var event = this.getevent (이벤트); var itop = event.clienty -this._y; var ILEFT = Event.ClientX- this._x; this.element.style.top = itop + "px"; this.element.style.left = Ileft + "PX"; this.onmove (); }, stopdrag : function () {this.removeHandler (문서, "mouseMove", this._movedRag); this.removeHandler (문서, "마우스 업", this._stopdrag); this.handle.releasecapture && this.handle.releasecapture (); this.onstop ()}, setOptions : function (옵션) {this.options = {hone : this. element, // event object onstart : function () {}, // 함수 onMove : function () {}, // 함수 onStop : function onStop : function () {} // instop}; for (옵션의 var p) {this.options [p] = 옵션 [p]; }}, $ : function (id) {return typeof id === "String"? document.getElementById (id) : id; }, addHandler : 함수 (요소, 이벤트 타입, 핸들러) {if (element.addeventListener) {return Element.AdDeventListener (eventType, handler, false); } else {return element.attacheVent ( "on"+eventType, handler); }}, removeHandler : 함수 (요소, 이벤트 타입, 핸들러) {if (element.removeEventListener) {return.removeEventListener (eventType, handler, false); } else {return Element.DetacheVent ( "on" + eventType, handler); }}, getEvent : function (event) {return event || Window.event; }, expendDefault : function (event) {if (event.preventDefault) {event.preventDefault (); } else {event.returnValue = false; }}, bind : function (obj, handler) {return function () {return handler.apply (obj, arguments); }}}}; window.onload = function () {var drag_div = document.getElementById ( "drag_div"); var drag = new drag (drag_div, {handle : drag_div}); } </script> </html>