JS 드래그를위한 일반적인 아이디어
1. 드래그, 드래그 및 드래그가 시작될 때 이벤트를 onmousedown, onmousemove 및 onmouseup ()를 각각 ().
전화기의 터치 이벤트가 각각 OnTouchStart, OnTouchmove 및 OnTouchend 인 경우.
2. 마우스를 누르면 onmousedown 이벤트가 발생할 때 : 마우스 위치를 얻고, 드래그 된 요소의 위치를 가져오고, 수직 및 수평 좌표 ()의 차이를 기록하십시오. OnMouseMove, OnMouseUp 이벤트를 문서 요소에 바인딩하십시오.
JS 드래그에 처음 접촉하기 시작했을 때, 내가 궁금한 점은 왜 그것이 드래그 된 요소 대신 문서에 묶여 있었습니까? 드래그 된 요소가 드래그 된 요소에 바인딩되면 마우스가 너무 빨리 드래그되면 마우스가 드래그 된 요소에서 분리됩니다.
3. 마우스가 드래그 할 때 onMouseMove 이벤트가 발생할 때 : 드래그 된 요소의 위치를 절대 위치로 변경하여 요소의 위치를 왼쪽과 상단을 통해 변경하여 요소가 마우스의 드래그와 함께 움직일 수 있습니다. 마우스 위치를 얻고, 드래그 된 요소의 왼쪽 값으로 2 단계에 저장된 수평 좌표 차이를 빼고, 2 단계 2에 저장된 수직 좌표로부터 마우스 x 좌표 (e.clienty)에서 2 단계에 저장된 수직 좌표를 빼냅니다. 차이는 드래그 된 요소의 최고 가치입니다. 마우스 드래그 후 요소의 효과를 구현하십시오.
4. 마우스 버튼을 누르면 onmouseup 이벤트가 발생할 때 : OnMouseMove 및 OnMouseUp 이벤트를 CLEA
가장 인기있는 드래그 앤 드롭 플러그인 Dom-Drag 클래스 라이브러리 (저자 : Aaron Boodman)
소스 코드는 다음과 같습니다
코드 사본은 다음과 같습니다.
/*여기서 (dom-drag.js) 파일 ********************************* ********** ************
* dom-drag.js
* 09.25.2001
* www.youngpup.net
***************************************************************************************** 누군가 *******
* 10.28.2001- 이벤트가있는 사소한 버그를 수정했습니다
* 때때로 뿌리가 아닌 손잡이에서 발사되었습니다.
***************************************************************************************** 누군가 ******* /
var drag = {
obj : null,
Init : 기능 (O, Oroot, Minx, Maxx, Miny, Maxy, Bswaphorzref, Bswapvertref, Fxmapper, Fymapper)
{{
O.onmousedown = drag.start;
O.hmode = bswaphorzref : true;
O.vmode = bswapvertref : true;
O.ROOT = OROT && oroot! = null?
if (o.hmode && isnan (parseint (o.root.style.left)))) o.root.style.left = "0px";
if (o.vmode && isnan (parseint (o.root.style.top))) o.root.style.top = "0px";
if (! o.hmode && isnan (parseint (root.style.right))) o.root.style.right = "0px";
if (! o.vmode && isnan (parseint (o.root.style.bottom))) a.root.style.bottom = "0px";
o.minx = typeof minx! = 'undefined': null;
O.miny = typeof miny! = '정의되지 않은': null;
o.maxx = typeof maxx! = 'undefined': null;
o.maxy = typeof maxy! = '정의되지 않은'?
o.xmapper = fxmapper : null;
o.ymapper = fymapper : null;
o.root.ondragstart = new function ();
o.root.ondragend = new function ();
o.root.ondrag = new function ();
},
시작 : 기능 (e)
{{
var o = drag.obj = this;
e = drag.fixe (e);
var y = parseint (O.vmode? o.root.style.top : O.root.style.bottom);
var x = parseint (o.hmode? o.root.style.left : O.root.style.right);
O.ROOT.ONDRAGSTART (X, y);
O.lastmousex = e.clientx;
O.lastmousey = e.clienty;
if (o.hmode) {
if (o.minx! = null) o.minmousex = e.clientx -x + o.minx;
if (o.maxx! = null) O.maxmousex = O.minmousex + o.maxx -o.minx;
} 또 다른 {
if (O.MINX! = NULL) O.MAXMOUSEX = -O.MINX + E.CLIENTX + X;
if (o.maxx! = null) O.minmousex = -o.maxx + e.clientx + x;
}
if (o.vmode) {
if (o.miny! = null) o.minmousey = e.clienty -y + o.miny;
if (o.maxy! = null) O.maxmousey = O.minmousey + O.maxy -O.miny;
} 또 다른 {
if (o.miny! = null) o.maxmousey = -o.miny + e.clienty + y;
if (o.maxy! = null) o.minmousey = -o.maxy + e.clienty + y;
}
document.onmouseMove = drag.drag;
Document.onMouseUp = drag.end;
거짓을 반환합니다.
},
드래그 : 기능 (e)
{{
e = drag.fixe (e);
var o = drag.obj;
var ey = e.clienty;
var ex = e.clientx;
var y = parseint (O.vmode? o.root.style.top : O.root.style.bottom);
var x = parseint (o.hmode? o.root.style.left : O.root.style.right);
var nx, NY;
if (o.minx! = null) ex = O.hmode?
if (O.maxx! = null) ex = O.hmode?
if (o.miny! = null) ey = o.vmode?
if (o.maxy! = null) ey = o.vmode?
nx = x + ((ex -o.lastmousex) * (O.hmode? 1 : -1));
ny = y + ((ey -o.lastmousey) * (O.vmode? 1 : -1));
if (O.xmapper) nx = O.xmapper (y)
else if (o.ymapper) ny = o.ymapper (x)
drag.obj.root.style [o.hmode? "왼쪽": "오른쪽"= nx + "px";
drag.obj.root.style [o.vmode? "맨 아래"] = ny + "px";
drag.obj.lastmousex = ex;
drag.obj.lastmousey = ey;
drag.obj.root.ondrag (NX, NY);
거짓을 반환합니다.
},
끝 : 함수 ()
{{
document.onmouseMove = null;
document.onmouseup = null;
drag.obj.root.ondragend (parseint (drag.obj.root.style [drag.obj.hmode? "왼쪽": "오른쪽"]),
parseint (drag.obj.root.style [drag.obj.vmode? "상단")));
drag.obj = null;
},
고정 : 기능 (e)
{{
if (typeof e == 'undefined') e = window.event;
if (e.layerx == 'undefined') e.layerx = e.offsetx;
if (e.layery == 'undefined') e.layery = e.offsety;
반환 e;
}
};
2 : 드래그 앤 드롭 정렬도 일반적인 효과입니다.
일반적인 구현 아이디어
1. 절대 경로로 클릭하고 드래그하여 드래그하는 요소를 변환하고 위치를 교체 할 새 임시 요소를 만듭니다.
2. 이동 과정에서 마우스 위치 가이 요소에있는 경우 마우스와 나머지 요소 사이의 위치 관계를 계산하십시오.
3. 끝에서는 임시 요소 앞에 드래그 된 요소를 삽입하고 임시 요소를 삭제하십시오.
인터넷에 꽤 좋은 사람이 조용히 쓴 블로거가 있습니다.
다음은 코드입니다
코드 사본은 다음과 같습니다.
(기능 (WIN, DOC) {
var _this = null;
var info = {};
var list = [];
var sortable = function (opts) {
this.opts = opts;
_this = this;
list = x.getByclass (this.opts.sortclass, doc);
x.addevent (doc, 'mousedown', this.handleevent);
x.addevent (doc, 'mousemove', this.handleevent);
x.addevent (doc, 'mouseup', this.handleevent);
};
sortable.prototype = {
handleEvent : 함수 (이벤트) {
var e = 이벤트 || 이벤트;
var target = event.target || event.srcelement;
스위치 (event.type) {
사례 'Mousedown':
X.HASCLASS (target, _this.opts.sortclass) && _this.downevent.call (_this, e, target);
부서지다;
사례 'MouseMove':
info.dobj && _this.moveevent.call (_this, e, target);
부서지다;
사례 '마우스 업':
info.dobj && _this.upevent.call (_this, e, target);
부서지다;
기본값 : 브레이크;
}
},
downEvent : 함수 (e, target) {
info.dobj = 대상;
var off = x.getOffset (대상);
target.x = e.clientx -Off [0];
target.y = E.Clienty- OFF [1];
target.style.position = '절대';
target.style.left = OFF [0] +'PX';
target.style.top = OFF [1] +'PX';
info.vobj = Doc.CreateElement ( 'div');
info.vobj.style.width = off [2] +'px';
info.vobj.style.height = off [3] +'px';
target.parentnode.insertbefore (info.vobj, target);
},
MoveEvent : 함수 (e, target) {
win.getSelection?
info.dobj.style.left = e.clientx- info.dobj.x +'px';
info.dobj.style.top = e.clienty- info.dobj.y +'px';
for (var i = 0; i <list.length; i ++) {
if (list [i] === info.dobj) {
계속하다;
}
var off = x.getOffset (list [i]);
if (e.clientx> off [0] && e.clientx <off [0] + off [2] && e.clienty> off [1] && e.clienty <off [1] + off [3]) {
스위치 (true) {
CASE E.CLIENTY <(OFF [1] + OFF [3]) / 2 :
list [i] .parentnode.insertbefore (info.vobj, list [i]);
부서지다;
CASE! LIST [i] .NexTibling :
목록 [i] .parentNode.appendChild (info.vobj);
부서지다;
기본:
list [i] .parentnode.insertbefore (info.vobj, list [i] .nextsibling);
부서지다;
}
}
}
},
UpEvent : 함수 (e, target) {
info.dobj.style.position = 'static';
info.vobj.parentnode.insertbefore (info.dobj, info.vobj);
info.dobj.parentnode.removechild (info.vobj);
정보 = {};
}
};
Win.sortable = 정렬 가능;
}) (창, 문서);