JavaScript实现网页对象拖放功能的方法
本文实例讲述了JavaScript实现网页对象拖放功能的方法。分享给大家供大家参考。具体如下：
<!DOCTYPEHTMLPUBLIC"-//W3C//DTDHTML4.01Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Drag</title>
<metahttp-equiv="Content-Type"content="text/html;charset=utf-8">
<style>
#myDiv{width:50px;height:50px;background-color:red}
</style>
</head>
<body>
<divid="myDiv"></div>
</body>
<scripttype="text/javascript">
varisIE=document.all?true:false;
//判断是否是IE浏览器
functionaddEventHandler(oTarget,sEventType,fnHandler){
//添加事件
if(oTarget.addEventListener){
oTarget.addEventListener(sEventType,fnHandler,false);
}elseif(oTarget.attachEvent){
oTarget.attachEvent("on"+sEventType,fnHandler);
}else{
oTarget["on"+sEventType]=fnHandler;
}
}
functionremoveEventHandler(oTarget,sEventType,fnHandler){
//移除事件
if(oTarget.removeEventListener){
oTarget.removeEventListener(sEventType,fnHandler,false);
}elseif(oTarget.detachEvent){
oTarget.detachEvent("on"+sEventType,fnHandler);
}else{
oTarget["on"+sEventType]=null;
}
}
varBindAsEventListener=function(object,fun){
//以另一个对象替换当前对象
returnfunction(event){
returnfun.call(object,(event||window.event));
}
}
var$=function(id){
returndocument.getElementById(id);
}
varClass={
create:function(){
returnfunction(){this.initialize.apply(this,arguments);}
}
}
vardrag=Class.create();
drag.prototype={
initialize:function(id){//初始化
this._drag=$(id);
this._flag=false;
addEventHandler(this._drag,'mousedown',BindAsEventListener(this,this.start));
this._fM=BindAsEventListener(this,this.move);
this._fS=BindAsEventListener(this,this.stop);
this._drag.style.position="absolute";
},
start:function(oEvent){//相当于onmousedown事件
//returnthis._name;
this._x=oEvent.clientX-this._drag.offsetLeft;
this._y=oEvent.clientY-this._drag.offsetTop;
addEventHandler(document,'mousemove',this._fM);
addEventHandler(document,'mouseup',this._fS);
if(isIE){
addEventHandler(this._drag,"losecapture",this._fS);
//焦点丢失
this._Handle.setCapture();//设置鼠标捕获
}else{
addEventHandler(window,"blur",this._fS);//焦点丢失
oEvent.preventDefault();//阻止默认动作
}
},
move:function(oEvent){//相当于onmonusemove事件
this._drag.style.left=oEvent.clientX-this._x+"px";
this._drag.style.top=oEvent.clientY-this._y+"px";
},
stop:function(){//相当于onmouseup事件
removeEventHandler(document,'mousemove',this._fM);
removeEventHandler(document,'mouseup',this._fS);
if(isIE){
removeEventHandler(this._drag,"losecapture",this._fS);
this._Handle.releaseCapture();
}else{
removeEventHandler(window,"blur",this._fS);
}
}
}
varndrag=newdrag("myDiv");
</script>
</html>
希望本文所述对大家的javascript程序设计有所帮助。