javascript 표 분할 드래그 실현

Javascript 의 특징 은 dom 의 처리 와 웹 페이지 효과 입 니 다. 대부분의 경우 우 리 는 이 언어의 가장 간단 한 기능 만 사용 합 니 다. 예 를 들 어 그림 윤 방 / 웹 페이지 를 만 드 는 tab 등 이 있 습 니 다. 이 글 은 자신의 웹 페이지 에서 끌 어 당 기 는 방법 을 보 여 드릴 것 입 니 다.
웹 사 이 트 를 끌 어 당 기 는 기능 에 가입 시 키 는 여러 가지 이유 가 있 습 니 다. 가장 간단 한 것 은 데이터 재 구성 입 니 다. 예 를 들 어 사용자 가 정렬 할 수 있 는 시퀀스 된 내용 이 있 습 니 다. 사용 자 는 모든 항목 에 입력 하거나 select 로 선택 해 야 합 니 다. 앞의 방법 을 대체 하 는 것 은 끌 어 당 기 는 것 입 니 다. 아마도 사용자 가 끌 수 있 는 네 비게 이 션 창 이 필요 할 것 입 니 다!그러면 이런 효 과 는 모두 매우 간단 하 다. 왜냐하면 너 는 쉽게 실현 할 수 있 기 때문이다!
웹 페이지 에서 끌 어 당 기 는 것 도 복잡 하지 않다. 첫째, 마우스 좌 표를 알 아야 한다. 둘째, 사용자 가 마우스 로 웹 페이지 요 소 를 클릭 하고 끌 어 당 기 는 것 을 알 아야 한다. 마지막 으로 우 리 는 이 요 소 를 이동 해 야 한다.
마우스 이동 정보 가 져 오기
첫째, 마우스 좌 표를 가 져 와 야 합 니 다. document. onmousemove 에 사용자 함 수 를 추가 하면 됩 니 다.
document.onmousemove = mouseMove;구현 스 크 립 트: ＜ script ＞ function mouseMove (ev) {ev = ev | | window. event; var mousePos = mouseCoords (ev); document. getElementById ('xxx'). value = mousePos. x; document. getElementById ('yy'). value = mousePos. y;} function mouseCoords (ev) {if (ev. pageX | |. pageY) {return {x: ev. pageX, y: ev. pageY};} return {x: ev. pageX{x:ev.clientX + document.body.scrollLeft - document.body.clientLeft,y:ev.clientY + document.body.scrollTop - document.body.clientTop};}document.onmousemove = mouseMove;＜／script＞＜input id=xxx type=text＞＜br＞＜input id=yyy type=text＞
우선 evnet 대상 을 설명 하 십시오. 마우스 / 클릭 / 버튼 등 을 이동 할 때 이벤트 이벤트 에 대응 합 니 다. Internet Explorer 에 서 는 이벤트 가 전역 변수 로 window. event 에 저 장 됩 니 다. fireforx 나 다른 브 라 우 저 에 서 는 이벤트 이벤트 이벤트 가 사용자 정의 함수 로 가 져 옵 니 다. mouseMove 함 수 를 document. onmousemov 함수 에 할당 할 때e, mouseMove 는 마우스 이동 이 벤트 를 가 져 옵 니 다.
(ev = ev | | window. event) 이렇게 하면 ev 가 모든 브 라 우 저 에서 이벤트 이 벤트 를 가 져 옵 니 다. Firefox 에서 "| window. event" 는 작 동 하지 않 습 니 다. ev 는 이미 할당 되 었 기 때 문 입 니 다. MSIE 에서 ev 는 비어 있 기 때문에 ev 는 window. event 로 설정 합 니 다.
이 글 에서 마우스 좌 표를 여러 번 가 져 와 야 하기 때문에 mouseCoords 라 는 함 수 를 설 계 했 습 니 다. 이것 은 하나의 인자 만 포함 하고 있 습 니 다. 바로 the event 입 니 다.
MSIE 와 Firefox 를 비롯 한 다른 브 라 우 저 에서 실행 해 야 합 니 다. Firefox 는 이벤트. pageX 와 이벤트. pageY 로 문서 왼쪽 상단 에 해당 하 는 위 치 를 표시 합 니 다. 500 * 500 의 창 이 있 고 마우스 가 한가운데 있다 면 paegX 와 pageY 는 250 입 니 다. 페이지 를 500 px 아래로 굴 리 면 pageY 는 750 입 니 다. 이때 pageX 는 변 하지 않 습 니 다. 250 입 니까?
MSIE 는 이와 반대로 이벤트. clientX 와 이벤트. clientY 를 문서 가 아 닌 마우스 와 ie 창의 위 치 를 나 타 냅 니 다. 500 * 500 의 창 이 있 고 마우스 가 한가운데 있 으 면 clientX 와 clientY 도 250 입 니 다. 만약 당신 이 수직 으로 창 을 어느 위치 로 스크롤 한다 면 clientY 는 여전히 250 입 니 다. ie 창 에 비해 변화 가 없 기 때 문 입 니 다. 정확 한 결 과 를 얻 으 려 면 반드시 필요 합 니 다.scrollLeft 와 scrollTop 두 개의 문서 마우스 위치 에 대한 속성 을 추가 해 야 합 니 다. 마지막 으로 MSIE 는 0, 0 의 문서 시작 위치 가 없 기 때문에 2px 의 테 두 리 를 주변 에 설정 합 니 다. 테두리 의 너 비 는 document. body. clientLeft 와 clientTop 두 속성 에 포함 되 어 있 기 때문에 마우스 위치 에 추가 합 니 다.
다행히 이렇게 mouse Coords 함수 가 완성 되 었 습 니 다. 우 리 는 더 이상 좌표 에 신경 쓰 지 않 습 니 다.
마우스 클릭 포착
다음 에 우 리 는 마 우 스 를 언제 클릭 하고 언제 놓 는 지 알 게 될 것 이다. 만약 우리 가 이 단 계 를 뛰 어 넘 으 면, 우 리 는 드래그 를 할 때 마우스 가 위 를 움 직 일 때의 동작 을 영원히 모 를 것 이다. 이것 은 짜증 나 고 직관 에 어 긋 날 것 이다.
여기에 두 개의 함수 가 있 습 니 다: onmousedown 과 onmouseup. 우 리 는 document. onmousemove 를 받 을 수 있 도록 함 수 를 미리 설정 합 니 다. 이렇게 하면 document. onmousedown 과 document. onmouseup 을 가 져 올 것 같 습 니 다. 그러나 document. onmousedown 을 가 져 올 때 우 리 는 모든 대상 의 클릭 속성 을 가 져 왔 습 니 다. 예 를 들 어 text, images, tables 등 입 니 다. 우 리 는 필요 한 것 만 가 져 오고 싶 습 니 다.끌 어 당 기 는 속성 입 니 다. 따라서 이동 할 대상 을 가 져 오 는 함 수 를 설정 합 니 다. 스 크 립 트 구현:
＜script＞function mouseDown(ev){ev= ev || window.event;var target = ev.target || ev.srcElement;if(target.onmousedown || target.getAttribute('DragObj')){return false;}}function makeClickable(item){if(!item) return;item.onmousedown = function(ev){document.getElementById('ClickImage').value = this.name;}}document.onmousedown = mouseDown;window.onload = function(){makeClickable(document.getElementById('ClickImage1'));makeClickable(document.getElementById('ClickImage2'));makeClickable(document.getElementById('ClickImage3'));makeClickable(document.getElementById('ClickImage4'));}＜/script＞＜FIELDSET id=Demo3＞＜h3＞Demo - Click any image＜/h3＞＜IMG id=ClickImage1src="http://www.webreference.com/programming/javascript/mk/column2/Dragging and Dropping in JavaScript_files/drag_drop_spade.gif"name=Spade＞＜IMG id=ClickImage2src="http://www.webreference.com/programming/javascript/mk/column2/Dragging and Dropping in JavaScript_files/drag_drop_heart.gif"name=Heart＞＜IMG id=ClickImage3src="http://www.webreference.com/programming/javascript/mk/column2/Dragging and Dropping in JavaScript_files/drag_drop_diamond.gif"name=Diamond＞＜IMG id=ClickImage4src="http://www.webreference.com/programming/javascript/mk/column2/Dragging and Dropping in JavaScript_files/drag_drop_club.gif"name=Club＞＜BR＞You clicked on: ＜INPUT id=ClickImage type="text"＞ ＜/FIELDSET＞
원소 이동
마우스 이동 과 클릭 을 어떻게 포착 하 는 지 알 게 되 었 습 니 다. 나머지 는 이동 요소 입 니 다. 우선, 명확 한 페이지 위 치 를 확인 하려 면 css 스타일 시트 는 'absolute' 를 사용 해 야 합 니 다. 요소 의 절대 위 치 를 설정 하 는 것 은 스타일 시트 의 'top 과' left '로 위 치 를 정할 수 있 음 을 의미 합 니 다. 우 리 는 마우스 의 이동 을 모두 페이지 top - left 에 기반 하여우 리 는 다음 단 계 를 진행 할 수 있다.
우리 가 item. style. position = 'absolute' 를 정의 하면 모든 조작 은 left 좌표 와 top 좌 표를 바 꾸 고 이동 합 니 다.

document.onmousemove = mouseMove;
document.onmouseup   = mouseUp;
var dragObject  = null;
var mouseOffset = null;
function getMouseOffset(target, ev){
ev = ev || window.event;
var docPos    = getPosition(target);
var mousePos  = mouseCoords(ev);
return {x:mousePos.x - docPos.x, y:mousePos.y - docPos.y};
}
function getPosition(e){
var left = 0;
var top  = 0;
while (e.offsetParent){
left += e.offsetLeft;
top  += e.offsetTop;
e     = e.offsetParent;
}
left += e.offsetLeft;
top  += e.offsetTop;
return {x:left, y:top};
}
function mouseMove(ev){
ev           = ev || window.event;
var mousePos = mouseCoords(ev);
if(dragObject){
dragObject.style.position = 'absolute';
dragObject.style.top      = mousePos.y - mouseOffset.y;
dragObject.style.left     = mousePos.x - mouseOffset.x;
return false;
}
}
function mouseUp(){
dragObject = null;
}
function makeDraggable(item){
if(!item) return;
item.onmousedown = function(ev){
dragObject  = this;
mouseOffset = getMouseOffset(this, ev);
return false;
}
}

         ，   <>       
＜script＞
var iMouseDown  = false;
var dragObject  = null;
var curTarget   = null;
function makeDraggable(item){
if(!item) return;
item.onmousedown = function(ev){
dragObject  = this;
mouseOffset = getMouseOffset(this, ev);
return false;
}
}
function getMouseOffset(target, ev){
ev = ev || window.event;
var docPos    = getPosition(target);
var mousePos  = mouseCoords(ev);
return {x:mousePos.x - docPos.x, y:mousePos.y - docPos.y};
}
function getPosition(e){
var left = 0;
var top  = 0;
while (e.offsetParent){
left += e.offsetLeft + (e.currentStyle?(parseInt(e.currentStyle.borderLeftWidth)).NaN0():0);
top  += e.offsetTop  + (e.currentStyle?(parseInt(e.currentStyle.borderTopWidth)).NaN0():0);
e     = e.offsetParent;
}
left += e.offsetLeft + (e.currentStyle?(parseInt(e.currentStyle.borderLeftWidth)).NaN0():0);
top  += e.offsetTop  + (e.currentStyle?(parseInt(e.currentStyle.borderTopWidth)).NaN0():0);
return {x:left, y:top};
}
function mouseCoords(ev){
if(ev.pageX || ev.pageY){
return {x:ev.pageX, y:ev.pageY};
}
return {
x:ev.clientX + document.body.scrollLeft - document.body.clientLeft,
y:ev.clientY + document.body.scrollTop  - document.body.clientTop
};
}
function mouseDown(ev){
ev         = ev || window.event;
var target = ev.target || ev.srcElement;
if(target.onmousedown || target.getAttribute('DragObj')){
return false;
}
}
function mouseUp(ev){
dragObject = null;
iMouseDown = false;
}
function mouseMove(ev){
ev         = ev || window.event;
/*
We are setting target to whatever item the mouse is currently on
Firefox uses event.target here, MSIE uses event.srcElement
*/
var target   = ev.target || ev.srcElement;
var mousePos = mouseCoords(ev);
if(dragObject){
dragObject.style.position = 'absolute';
dragObject.style.top      = mousePos.y - mouseOffset.y;
dragObject.style.left     = mousePos.x - mouseOffset.x;
}
// track the current mouse state so we can compare against it next time
lMouseState = iMouseDown;
// this prevents items on the page from being highlighted while dragging
if(curTarget || dragObject) return false;
}
document.onmousemove = mouseMove;
document.onmousedown = mouseDown;
document.onmouseup   = mouseUp;
window.onload = function() {
makeDraggable(document.getElementById('DragImage5'));
makeDraggable(document.getElementById('DragImage6'));
makeDraggable(document.getElementById('DragImage7'));
makeDraggable(document.getElementById('DragImage8'));
}
＜/script＞
＜FIELDSET id=Demo5 style="HEIGHT: 70px"＞＜h3＞Demo - Drag any of the
images＜/h3＞＜IMG id=DragImage5
src="images/drag_drop_spade.gif"＞＜IMG
id=DragImage6
src="images/drag_drop_heart.gif"＞＜IMG
id=DragImage7
src="images/drag_drop_diamond.gif"＞＜IMG
id=DragImage8
src="images/drag_drop_club.gif"＞ ＜/FIELDSET＞