Javascriptçç¹ç¹æ¯domçå¤çä¸ç½é¡µææï¼å¤§å¤æ°æ
åµæ们åªç¨å°äºè¿ä¸ªè¯è¨çæç®åçåè½ï¼æ¯å¦å¶ä½å¾çè½®æ/ç½é¡µçtabççï¼è¿ç¯æç« å°åä½ å±ç¤ºå¦ä½å¨èªå·±çç½é¡µä¸å¶ä½ææ½ï¼
æå¾å¤çç±è®©ä½ çç½ç«å å
¥ææ½åè½ï¼æç®åçä¸ä¸ªæ¯æ°æ®éç»ï¼ä¾å¦ï¼ä½ æä¸ä¸ªåºåçå
容让ç¨æ·æåºï¼ç¨æ·éè¦ç»æ¯ä¸ªæ¡ç®è¿è¡è¾å
¥æè
ç¨select éæ©ï¼æ¿ä»£åé¢è¿ä¸ªæ¹æ³çå°±æ¯ææ½ï¼æè®¸ä½ çç½ç«ä¹éè¦ä¸ä¸ªç¨æ·å¯ä»¥æå¨ç导èªçªå£ï¼é£ä¹è¿äºææé½æ¯å¾ç®åï¼å ä¸ºä½ å¯ä»¥å¾å®¹æçå®ç°ï¼
ç½é¡µä¸å®ç°ææ½å
¶å®ä¹ä¸æ¯å¾å¤æï¼ç¬¬ä¸ä½ éè¦ç¥éé¼ æ åæ ï¼ç¬¬äºä½ éè¦ç¥éç¨æ·é¼ æ ç¹å»ä¸ä¸ªç½é¡µå
ç´ å¹¶å®ç°ææ½ï¼æåæ们è¦å®ç°ç§»å¨è¿ä¸ªå
ç´ ï¼
è·åé¼ æ 移å¨ä¿¡æ¯
第ä¸æ们éè¦è·åé¼ æ çåæ ï¼æ们å ä¸ä¸ªç¨æ·å½æ°å°document.onmousemoveå°±å¯ä»¥äº:
Java代ç æ¶è代ç
document.onmousemove = mouseMove;
function mouseMove(ev){
ev = ev || window.event;
var mousePos = mouseCoords(ev);
}
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
};
}
ä½ é¦å
è¦å£°æä¸ä¸ªevnet对象ï¼ä¸è®ºä½æ¶ä½ 移å¨é¼ æ ï¼ç¹å»ï¼æé®ççï¼ä¼å¯¹åºä¸ä¸ªeventçäºä»¶ï¼å¨Internet Exploreréeventæ¯å
¨å±åéï¼ä¼è¢«åå¨å¨window.eventéï¼ å¨firefoxä¸ï¼æè
å
¶ä»æµè§å¨ï¼eventäºä»¶ä¼è¢«ç¸åºçèªå®ä¹å½æ°è·åï¼å½æ们å°mouseMoveå½æ°èµå¼äºdocument.onmousemoveï¼mouseMoveä¼è·åé¼ æ 移å¨äºä»¶ï¼
(ev = ev || window.event) è¿æ ·è®©evå¨æææµè§å¨ä¸è·åäºeventäºä»¶ï¼å¨Firefoxä¸"||window.event"å°ä¸èµ·ä½ç¨ï¼å 为evå·²ç»æäºèµå¼ï¼å¨MSIEä¸evæ¯ç©ºçï¼æ以evå°è®¾ç½®ä¸ºwindow.event.
å 为æ们å¨è¿ç¯æç« ä¸éè¦å¤æ¬¡è·åé¼ æ åæ ï¼æ以æ们设计äºmouseCoordsè¿ä¸ªå½æ°ï¼å®åªå
å«äºä¸ä¸ªåæ°ï¼å°±æ¯the event.
æ们éè¦è¿è¡å¨MSIEä¸Firefox为é¦çå
¶ä»æµè§å¨ä¸ï¼Firefox以event.pageXåevent.pageYæ¥ä»£è¡¨é¼ æ ç¸åºäºæ档左ä¸è§çä½ç½®ï¼å¦æä½ æä¸ä¸ª500*500ççªå£ï¼èä¸ä½ çé¼ æ å¨æ£ä¸é´ï¼é£ä¹paegXåpageYå°æ¯250ï¼å½ä½ å°é¡µé¢å¾ä¸æ»å¨500pxï¼é£ä¹ pageYå°æ¯750.æ¤æ¶pageXä¸åï¼è¿æ¯250.
MSIEåè¿ä¸ªç¸åï¼MSIEå°event.clientXä¸event.clientYæ¥ä»£è¡¨é¼ æ ä¸ieçªå£çä½ç½®ï¼å¹¶ä¸æ¯ææ¡£ï¼å½æ们æä¸ä¸ª 500*500ççªå£ï¼é¼ æ å¨æ£ä¸é´ï¼é£ä¹clientXä¸clientYä¹æ¯250ï¼å¦æä½ åç´æ»å¨çªå£å°ä»»ä½ä½ç½®ï¼clientYä»ç¶æ¯250ï¼å 为ç¸å¯¹ieçªå£å¹¶æ²¡æååï¼æ³å¾å°æ£ç¡®çç»æï¼æ们å¿
é¡»å å
¥scrollLeftä¸scrollTopè¿ä¸¤ä¸ªç¸å¯¹äºææ¡£é¼ æ ä½ç½®çå±æ§ï¼æåï¼ç±äºMSIE 并没æ0,0çæ档起å§ä½ç½®ï¼å 为é常ä¼è®¾ç½®2pxçè¾¹æ¡å¨å¨å´ï¼è¾¹æ¡ç宽度å
å«å¨document.body.clientLeftä¸ clientTopè¿ä¸¤ä¸ªå±æ§ä¸ï¼æ们åå å
¥è¿äºå°é¼ æ çä½ç½®ä¸ï¼
å¾å¹¸è¿ï¼è¿æ ·mouseCoordså½æ°å°±å®æäºï¼æ们ä¸å为åæ çäºæå¿äºï¼
ææé¼ æ ç¹å»
ä¸æ¬¡æ们å°ç¥éé¼ æ ä½æ¶ç¹å»ä¸ä½æ¶æ¾å¼ï¼å¦ææ们跳è¿è¿ä¸æ¥ï¼æ们å¨åææ½æ¶å°æ°¸è¿ä¸ç¥éé¼ æ 移å¨ä¸é¢æ¶çå¨ä½ï¼è¿å°æ¯æ¼äººçä¸è¿åç´è§çï¼
è¿éæ两个å½æ°å¸®å©æ们:onmousedownä¸onmouseup.æ们é¢å
设置å½æ°æ¥æ¥æ¶document.onmousemoveï¼è¿æ ·çèµ·æ¥å¾è±¡æ们ä¼è·ådocument.onmousedownä¸document.onmouseupï¼ä½æ¯å½æ们è·å document.onmousedownæ¶ï¼æ们åæ¶è·åäºä»»ä½å¯¹è±¡çç¹å»å±æ§å¦:text,images,tablesçç.æ们åªæ³è·åé£äºéè¦ææ½çå±æ§ï¼æ以æ们设置å½æ°æ¥è·åæ们éè¦ç§»å¨ç对象ï¼
移å¨ä¸ä¸ªå
ç´
æ们ç¥éäºæä¹ææé¼ æ 移å¨ä¸ç¹å»ï¼å©ä¸çå°±æ¯ç§»å¨å
ç´ äºï¼é¦å
ï¼è¦ç¡®å®ä¸ä¸ªæç¡®ç页é¢ä½ç½®ï¼cssæ ·å¼è¡¨è¦ç¨'absolute'.设置å
ç´ ç»å¯¹ä½ç½®æå³çæ们å¯ä»¥ç¨æ ·å¼è¡¨ç.topå.leftæ¥å®ä½ï¼å¯ä»¥ç¨ç¸å¯¹ä½ç½®æ¥å®ä½äºï¼æ们å°é¼ æ ç移å¨å
¨é¨ç¸å¯¹é¡µé¢top-leftï¼åºäºè¿ç¹ï¼æ们å¯ä»¥è¿è¡ä¸ä¸æ¥äºï¼
å½æ们å®ä¹item.style.position='absolute'ï¼ææçæä½é½æ¯æ¹åleftåæ ä¸topåæ ï¼ç¶åå®ç§»å¨äºï¼
Java代ç æ¶è代ç
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;
}
}
ä½ ä¼æ³¨æå°è¿ä¸ªä»£ç å ä¹æ¯åé¢çå
¨éï¼å°åé¢çåå¨ä¸èµ·å°±å®ç°äºææ½ææäºï¼
å½æ们ç¹å»ä¸ä¸ªitemæ¶ï¼æ们就è·åäºå¾å¤åéï¼å¦é¼ æ ä½ç½®ï¼é¼ æ ä½ç½®èªç¶å°±å
å«äºé£ä¸ªitemçåæ ä¿¡æ¯äºï¼å¦ææ们ç¹å»äºä¸ä¸ª20*20pxå¾åçæ£ä¸é´ï¼é£ä¹é¼ æ çç¸å¯¹åæ 为{x:10,y:10}ï¼å½æ们ç¹å»è¿ä¸ªå¾åçå·¦ä¸è§é£ä¹é¼ æ çç¸å¯¹åæ 为 {x:0,y:0}.å½æ们ç¹å»æ¶ï¼æ们ç¨è¿ä¸ªæ¹æ³åå¾ä¸äºé¼ æ ä¸å¾çæ ¡å¯¹çä¿¡æ¯ï¼å¦ææ们ä¸è½å 载页é¢itemï¼é£ä¹ä¿¡æ¯å°æ¯documentä¿¡æ¯ï¼ä¼å¿½ç¥äºç¹å»çitemä¿¡æ¯ï¼
mouseOffsetå½æ°ä½¿ç¨äºå¦ä¸ä¸ªå½æ°getPosition.getPositionçä½ç¨æ¯è¿å itemç¸å¯¹é¡µé¢å·¦ä¸è§çåæ ï¼å¦ææ们å°è¯è·åitem.offsetLeftæè
item.style.leftï¼é£ä¹æ们å°åå¾itemç¸å¯¹ä¸ç¶çº§çä½ç½®ï¼ä¸æ¯æ´ä¸ªdocumentï¼ææçèæ¬æ们é½æ¯ç¸å¯¹æ´ä¸ªdocumentï¼è¿æ ·ä¼æ´å¥½ä¸äºï¼
为äºå®ægetPositionä»»å¡ï¼å¿
须循ç¯åå¾itemçç¶çº§ï¼æ们å°å è½½å
容å°itemçå·¦ï¼ä¸çä½ç½®ï¼æ们éè¦ç®¡çæ³è¦çtopä¸leftå表ï¼
èªä»å®ä¹äºmousemoveè¿ä¸ªå½æ°ï¼mouseMoveå°±ä¼ä¸ç´è¿è¡ï¼ç¬¬ä¸æ们确å®itemç style.position为absoluteï¼ç¬¬äºæ们移å¨itemå°åé¢å®ä¹å¥½çä½ç½®ï¼å½mouseç¹å»è¢«éæ¾ï¼dragObject被设置为 nullï¼mouseMoveå°ä¸å¨åä»»ä½äºï¼
Dropping an Item
åé¢çä¾åç®çå¾ç®åï¼å°±æ¯ææ½itemå°æ们å¸æå°çå°æ¹ï¼æ们ç»å¸¸è¿æå
¶ä»ç®çå¦å é¤itemï¼æ¯å¦æ们å¯ä»¥å°itemæå°åå¾æ¡¶éï¼æè
å
¶ä»é¡µé¢å®ä¹çä½ç½®ï¼
å¾ä¸å¹¸ï¼æ们æä¸ä¸ªå¾å¤§çé¾é¢ï¼å½æ们ææ½ï¼itemä¼å¨é¼ æ ä¹ä¸ï¼æ¯å¦mouseove,mousedown,mouseupæè
å
¶ä»mouse actionï¼å¦ææ们ææ½ä¸ä¸ªitemå°åå¾æ¡¶ä¸ï¼é¼ æ ä¿¡æ¯è¿å¨itemä¸ï¼ä¸å¨åå¾æ¡¶ä¸ï¼
æä¹è§£å³è¿ä¸ªé®é¢å¢ï¼æå 个æ¹æ³å¯ä»¥æ¥è§£å³ï¼ç¬¬ä¸ï¼è¿æ¯ä»¥åæ¯è¾æ¨èçï¼æ们å¨ç§»å¨é¼ æ æ¶itemä¼è·éé¼ æ ï¼å¹¶å ç¨äºmouseover/mousemoveçé¼ æ äºä»¶ï¼æ们ä¸è¿æ ·åï¼åªæ¯è®©itemè·éçé¼ æ ï¼å¹¶ä¸å ç¨mouseoverçé¼ æ äºä»¶ï¼è¿æ ·ä¼è§£å³é®é¢ï¼ä½æ¯è¿æ ·å¹¶ä¸å¥½çï¼æ们è¿æ¯å¸æitemè½ç´æ¥è·å¨mouseä¸ï¼
å¦ä¸ä¸ªéæ©æ¯ä¸åitemçææ½ï¼ä½ å¯ä»¥æ¹åé¼ æ æéæ¥æ¾ç¤ºéè¦ææ½çitemï¼ç¶åæ¾å¨é¼ æ éæ¾çä½ç½®ï¼è¿ä¸ªè§£å³æ¹æ¡ï¼ä¹æ¯å 为ç¾å¦åå ä¸äºæ¥åï¼
æåç解å³æ¹æ¡æ¯ï¼æ们并ä¸å»é¤ææ½ææï¼è¿ç§æ¹æ³æ¯å两ç§ç¹æ许å¤ï¼æ们éè¦å®ä¹æ们éè¦éæ¾ç®æ çå表ï¼å½é¼ æ éæ¾æ¶ï¼æå·¥å»æ£æ¥éæ¾çä½ç½®æ¯å¦æ¯å¨ç®æ å表ä½ç½®ä¸ï¼å¦æå¨ï¼è¯´ææ¯éæ¾å¨ç®æ ä½ç½®ä¸äºï¼
Java代ç æ¶è代ç
/*
All code from the previous example is needed with the exception
of the mouseUp function which is replaced below
*/
var dropTargets = [];
function addDropTarget(dropTarget){
dropTargets.push(dropTarget);
}
function mouseUp(ev){
ev = ev || window.event;
var mousePos = mouseCoords(ev);
for(var i=0; i<dropTargets.length; i++){
var curTarget = dropTargets[i];
var targPos = getPosition(curTarget);
var targWidth = parseInt(curTarget.offsetWidth);
var targHeight = parseInt(curTarget.offsetHeight);
if(
(mousePos.x > targPos.x) &&
(mousePos.x < (targPos.x + targWidth)) &&
(mousePos.y > targPos.y) &&
(mousePos.y < (targPos.y + targHeight))){
// dragObject was dropped onto curTarget!
}
}
dragObject = null;
}
é¼ æ éæ¾æ¶ä¼å»åæ¯å¦ædropå±æ§ï¼å¦æåå¨ï¼åæ¶é¼ æ æéè¿å¨dropçèå´å
ï¼æ§è¡dropæä½ï¼æ们æ£æ¥é¼ æ æéä½ç½®æ¯å¦å¨ç®æ èå´æ¯ç¨(mousePos.x>targetPos.x)ï¼èä¸è¿è¦ç¬¦åæ¡ä»¶(mousePos.x<(targPos.x + targWidth))ï¼å¦æææçæ¡ä»¶ç¬¦åï¼è¯´ææéç¡®å®å¨èå´å
ï¼å¯ä»¥æ§è¡dropæ令äºï¼
Pulling It All Together
æåæ们æ¥æäºææçdrag/dropçèæ¬çæï¼ä¸ä¸ä¸ªäºæ
æ¯æ们å°å建ä¸ä¸ªDOMå¤çï¼
ä¸é¢ç代ç å°å建container(容å¨),èä¸ä½¿ä»»ä½ä¸ä¸ªéè¦drag/dropçitemåæä¸ä¸ªå®¹å¨çitem.代ç å¨è¿ä¸ªæç« ç¬¬äºä¸ªdemoçåé¢ï¼å®å¯ä»¥ç¨æ·è®°å½ä¸ä¸ªlist(å表)ï¼å®ä¸ºä¸ä¸ªå¯¼èªçªå£å¨å·¦è¾¹æè
å³è¾¹ï¼æè
æ´å¤çå½æ°ä½ å¯ä»¥æ³å°çï¼
ä¸ä¸æ¥æ们å°éè¿"å代ç "让readerçå°ç代ç ï¼ä¸é¢ä¸ºæ¨è:
1ãå½document第ä¸æ¬¡è½½å
¥æ¶ï¼å建dragHelper DIV.dragHelperå°ç»ç§»å¨çitemå é´å½±ï¼çå®çitem没æ被draggedï¼åªæ¯ç¨äºinsertBeforåappendChildæ¥ç§»å¨äºï¼æ们éèäºdragHelper
2ãæäºmouseDownä¸mouseUpå½æ°ï¼ææçæä½ä¼å¯¹åºå°å½å°iMouseDownçç¶æä¸ï¼åªæå½mouseå·¦é®ä¸ºæä¸æ¶iMouseDownæ为çï¼å¦å为åï¼
3ãæ们å建äºå
¨å±åéDragDropsä¸å
¨å±å½æ°CreateDragContainer.DragDropså
å«äºä¸ç³»åç¸å¯¹å½¼æ¤ç容å¨ï¼ä»»ä½åæ°(containers)å°éè¿CreatedcragContainerè¿è¡éç»ä¸åºååï¼è¿æ ·å¯ä»¥èªç±ç移å¨ï¼CreateDragContainerå½æ°ä¹å°itemè¿è¡ç»å®ä¸è®¾ç½®å±æ§ï¼
4ãç°å¨æ们ç代ç ç¥éæ¯ä¸ªitemçå å
¥ï¼å½æ们移å¨å¤mouseMoveï¼mouseMoveå½æ°é¦å
ä¼è®¾ç½®åétargetï¼é¼ æ 移å¨å¨ä¸é¢çitemï¼å¦æè¿ä¸ªitemå¨å®¹å¨ä¸(checked with getAttribute):
* è¿è¡ä¸å°æ®µä»£ç æ¥æ¹åç®æ çæ ·å¼ï¼åé rolloverææ
* æ£æ¥é¼ æ æ¯å¦æ²¡ææ¾å¼ï¼å¦æ没æ
o 设置curTarget代表å½åitem
o è®°å½itemçå½åä½ç½®ï¼å¦æéè¦çè¯ï¼æ们å¯ä»¥å°å®è¿å
o å
éå½åçitemå°dragHelperä¸ï¼æ们å¯ä»¥ç§»å¨å¸¦é´å½±ææçitem.
o itemæ·è´å°dragHelperåï¼åæçitemè¿å¨é¼ æ æéä¸ï¼æ们å¿
é¡»å é¤ædragObjï¼è¿æ ·èæ¬èµ·ä½ç¨ï¼dragObj被å
å«å¨ä¸ä¸ªå®¹å¨ä¸ï¼
o æå容å¨ä¸ææçitemå½ååæ ï¼é«åº¦/宽度ï¼è¿æ ·åªéè¦è®°å½ä¸æ¬¡ï¼å½item被dragæ¶ï¼æ¯émouse移å¨ï¼æ¯ç§»éå°±ä¼è®°å½æåä¸ä¸æ¬¡ï¼
* å¦æ没æï¼ä¸éè¦åä»»ä½äºï¼å 为è¿ä¸æ¯ä¸ä¸ªéè¦ç§»å¨çitem
5ãæ£æ¥curTargetï¼å®åºè¯¥å
å«ä¸ä¸ªè¢«ç§»å¨çitem,å¦æåå¨ï¼è¿è¡ä¸é¢æä½ï¼
* å¼å§ç§»å¨å¸¦æé´å½±çitemï¼è¿ä¸ªitemå°±æ¯åææå建ç
* æ£æ¥æ¯ä¸ªå½å容å¨ä¸çcontainerï¼æ¯å¦é¼ æ å·²ç»ç§»å¨å°è¿äºèå´å
äº
o æ们æ£æ¥çä¸ä¸æ£å¨æå¨çitemæ¯å±äºåªä¸ªcontainer
o æ¾ç½®itemå¨ä¸ä¸ªcontainerçæä¸ä¸ªitemä¹åï¼æè
æ´ä¸ªcontainerä¹å
o 确认itemæ¯å¯è§ç
* å¦æé¼ æ ä¸å¨containerä¸ï¼ç¡®è®¤itemæ¯ä¸å¯è§äºï¼
温馨提示:答案为网友推荐,仅供参考