拖动一个HTML元素

时间：2021-05-18

<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;


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>

声明：本页内容来源网络，仅供用户参考；我单位不保证亦不表示资料全面及准确无误，也不保证亦不表示这些资料为最新信息，如因任何原因，本网内容或者用户因倚赖本网内容造成任何损失或损害，我单位将不会负任何法律责任。如涉及版权问题，请提交至online#300.cn邮箱联系删除。

相关文章