js 드래그 효과 클래스 및 dom-drag.js_javascript 기술에 대한 간략한 분석-JS 튜토리얼-php.cn

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

WBOY

풀어 주다： 2016-05-16 18:22:49

원래의

1079명이 탐색했습니다.

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

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

 
/************************************************ 
* 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
🎜>}
< /style>

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