js 드래그 효과 클래스 및 dom-drag.js_javascript 기술에 대한 간략한 분석

이것은 드래그 앤 드롭 기능만 구현한 매우 간단한 클래스입니다. 물론 코드는 원본과 간결함을 유지합니다.
코드

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

/************************************************
* Drag.js
* 작성자: Oak Lodge 07.17.2010
* http://www.cnblogs.com/babyzone2004/
* 사용법: Drag.initDrag(id) id는 태그의 ID입니다. 이름
********************************************** ** ****/
var Drag={
dragObject: null,
mouseOffset:null,
initDrag:function(item){
if(item){
this.item=document.getElementById(item)
this.item.onmousedown= function(evnt ){
document.onmousemove=Drag.mouseMove;
document.onmouseup=Drag.mouseUp;
Drag.dragObject=this;
Drag.mouseOffset(this,evnt );
false 반환
}
},
mousePoint:function(x,y){
this.x=x; ;
},
mousePosition:function (evnt){
evnt=evnt||window.event;
var x=parseInt(evnt.clientX)
var y=parseInt(evnt .clientY) ;
새 Drag.mousePoint(x,y) 반환
},
getMouseOffset:function(target,evnt){
var mousePos=Drag.mousePosition(evnt); >var x =mousePos.x-target.offsetLeft;
var y=mousePos.y-target.offsetTop;
return new Drag.mousePoint(x,y);
},
mouseUp: 함수(evnt ){
Drag.dragObject=null;
document.onmousemove = null;
document.onmouseup = null
},
mouseMove:function(evnt){
if(!Drag.dragObject) return;
var mousePos=Drag.mousePosition(evnt);
Drag.dragObject.style.position="absolute"
Drag.dragObject.style.top=mousePos. y-Drag .mouseOffset.y "px";
Drag.dragObject.style.left=mousePos.x-Drag.mouseOffset.x "px";
return false; 🎜>

코드가 그리 복잡하지 않으니 자세히 설명하지 않겠습니다. 필요하신 경우 직접 다운로드하여 사용하실 수 있으며, Import 후 Drag.initDrag(id명) 메소드를 이용하여 적용하시면 됩니다.
사실 인터넷에는 이미 경량의 dom-drag 클래스 라이브러리가 있습니다(저자: Aaron Boodman). 제가 작성한 클래스 라이브러리를 다시 보면 자신감이 넘칩니다. dom-drag 클래스. http://boring.youngpup.net/projects/dom-drag/Download에서 찾을 수 있습니다. 코드는 매우 간단하며 사용하기 쉬운 많은 기능을 제공합니다. 그리고 아주 상세한 예시가 웹사이트에 제공되어 있습니다.
이 클래스 라이브러리는 플래시의 startDrag 메소드와 유사하며 코드가 간결하지만 실용적인 기능을 갖추고 있습니다. 구성 요소를 드래그할 수 있게 하려면 Drag.init() 메서드를 호출하면 됩니다.
init: function(o, oRoot, minX, maxX, minY, maxY, bSwapHorzRef, bSwapVertRef, fXMapper, fYMapper)
o: 마우스 드래그를 구현하려는 컴포넌트입니다.

oRoot: o 컴포넌트의 상위 레이어는 o와 함께 드래그됩니다.
minX, maxX, minY, maxY: 아래 예제 크롭에서 볼 수 있듯이 oRoot가 있으면 범위가 결정됩니다.
bSwapHorzRef, bSwapVertRef: 구성요소의 우선순위를 설정합니다.
fXMapper, fYMapper: 드래그 경로를 설정합니다.

세 번째 예:
예제 링크: http ://boring .youngpup.net/projects/dom-drag/ex3.html
드래그 범위를 제한할 수 있으며 코드는 다음과 같습니다.




복사 code

코드는 다음과 같습니다. < ;html>

>

#thumb {
높이:50px
배경색:#eee
🎜>}

<script> <BR>var aThumb = document.getElementById("thumb") <BR>Drag.init(aThumb, ff;">null, 25, 25, 25, 200) ; <BR></script>



<script> <BR>var aThumb = document.getElementById("thumb") <BR>Drag.init(aThumb, null, 25, 25, 25, 200); ></script>
init의 4개 숫자 매개변수는 요소를 드래그할 수 있는 영역, 즉 왼쪽 상단과 오른쪽 하단의 x, y 좌표에 해당합니다. 따라서 요소는 스크롤 막대처럼 (25, 25)와 (25, 200)의 직선 사이에서만 슬라이드할 수 있습니다.
이 클래스 라이브러리는 간단한 기능을 가지고 있지만 다른 기능과 결합하면 플래시처럼 눈부신 효과를 낼 수 있습니다.
데모 코드:
http://demo.jb51.net/js/dom-drag/demo.html코드 패키징:
http://www.jb51.net/ jiaoben/28492.html