<scriptcontent="text/javascript">
variMouseDown=false;
vardragObject=null;
Number.prototype.NaN0=function(){returnisNaN(this)?0:this;}
//Demo0variables
varDragDrops=[];
varcurTarget=null;
varlastTarget=null;
functionmakeDraggable(item){
if(!item)return;
item.onmousedown=function(ev){
dragObject=this;
mouseOffset=getMouseOffset(this,ev);
returnfalse;
}
}
functiongetMouseOffset(target,ev){
ev=ev||window.event;
vardocPos=getPosition(target);
varmousePos=mouseCoords(ev);
return{x:mousePos.x-docPos.x,y:mousePos.y-docPos.y};
}
functiongetPosition(e){
varleft=0;
vartop=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};
}
functionmouseCoords(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
};
}
functionmouseDown(ev){
ev=ev||window.event;
vartarget=ev.target||ev.srcElement;
if(target.onmousedown||target.getAttribute('DragObj')){
returnfalse;
}
}
functionmouseUp(ev){
//dragObject=null;
if(dragObject){
ev=ev||window.event;
varmousePos=mouseCoords(ev);
vardT=dragObject.getAttribute('droptarget');
if(dT){
vartargObj=document.getElementById(dT);
varobjPos=getPosition(targObj);
if((mousePos.x>objPos.x)&&(mousePos.y>objPos.y)
&&(mousePos.x<(objPos.x+parseInt(targObj.offsetWidth)))
&&(mousePos.y<(objPos.y+parseInt(targObj.offsetHeight)))){
varnSrc=targObj.getAttribute('newSrc');
if(nSrc){
dragObject.src=nSrc;
setTimeout(function(){
if(!dragObject||!dragObject.parentNode)return;
dragObject.parentNode.removeChild(dragObject);
dragObject=null;
},parseInt(targObj.getAttribute('timeout')));
}else{
dragObject.parentNode.removeChild(dragObject);
}
}
}
}
dragObject=null;
iMouseDown=false;
}
functionmouseMove(ev){
ev=ev||window.event;
/*
Wearesettingtargettowhateveritemthemouseiscurrentlyon
Firefoxusesevent.targethere,MSIEusesevent.srcElement
*/
vartarget=ev.target||ev.srcElement;
varmousePos=mouseCoords(ev);
if(dragObject){
dragObject.style.position='absolute';
dragObject.style.top=mousePos.y-mouseOffset.y;
dragObject.style.left=mousePos.x-mouseOffset.x;
}
//trackthecurrentmousestatesowecancompareagainstitnexttime
lMouseState=iMouseDown;
//thispreventsitemsonthepagefrombeinghighlightedwhiledragging
if(curTarget||dragObject)returnfalse;
}
functionaddDropTarget(item,target){
item.setAttribute('droptarget',target);
}
document.onmousemove=mouseMove;
document.onmousedown=mouseDown;
document.onmouseup=mouseUp;
window.onload=function(){
makeDraggable(document.getElementById('DragImage9'));
makeDraggable(document.getElementById('DragImage10'));
makeDraggable(document.getElementById('DragImage11'));
makeDraggable(document.getElementById('DragImage12'));
addDropTarget(document.getElementById('DragImage9'),'TrashImage1');
addDropTarget(document.getElementById('DragImage10'),'TrashImage1');
addDropTarget(document.getElementById('DragImage11'),'TrashImage1');
addDropTarget(document.getElementById('DragImage12'),'TrashImage1');
}
</script>
</head>
<body>
<fieldsetid="Demo6"style="height:70px"><h3>Demo-Draganyoftheimages</h3>
<imgid="TrashImage1"src="http://www.cnlei.org/codes/javascript/js-drag-drop/images/drag_drop_trash.gif"/>
<imgid="DragImage9"src="http://www.cnlei.org/codes/javascript/js-drag-drop/images/drag_drop_spade.gif"/>
<imgid="DragImage10"src="http://www.cnlei.org/codes/javascript/js-drag-drop/images/drag_drop_heart.gif"/>
<imgid="DragImage11"src="http://www.cnlei.org/codes/javascript/js-drag-drop/images/drag_drop_diamond.gif"/>
<imgid="DragImage12"src="http://www.cnlei.org/codes/javascript/js-drag-drop/images/drag_drop_club.gif"/>
</fieldset>
【拖动一个HTML元素】相关文章：
★ 鼠标图片振动代码
★ JS代码混淆初步
★ 制作特殊字的脚本
★ 自动设为主页
★ 自动关闭的层