JS实现的简易拖放效果示例
本文实例讲述了JS实现的简易拖放效果。分享给大家供大家参考，具体如下：
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=gb2312"/>
<title>简易拖放效果</title>
</head>
<body>
<scripttype="text/JavaScript">
<!--
varisIE=(document.all)?true:false;//是否ie
var$=function(id){
//返回id对象
return"string"==typeofid?document.getElementById(id):id;
};
varClass={
//带构造方法的类
create:function(){
returnfunction(){this.initialize.apply(this,arguments);}//用apply应用下面的initialize初始化属性
}
}
varExtend=function(destination,source){
//继承
for(varpropertyinsource){
destination[property]=source[property];
}
}
varBind=function(object,fun){
returnfunction(){
returnfun.apply(object,arguments);
}
}
/**
用object对象调用fun参数是event||windowevent
**/
varBindAsEventListener=function(object,fun){
returnfunction(event){
returnfun.call(object,(event||window.event));
}
}
/**
添加帧听器事件
@oTarget目标对象
@sEventType事件类型
@fnHandler目标触发事件对象
**/
functionaddEventHandler(oTarget,sEventType,fnHandler){
if(oTarget.addEventListener){
oTarget.addEventListener(sEventType,fnHandler,false);//firefox
}elseif(oTarget.attachEvent){
oTarget.attachEvent("on"+sEventType,fnHandler);//ie
}else{
oTarget["on"+sEventType]=fnHandler;//other
}
};
/**
清除添加的帧听器事件
@oTarget目标对象
@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;
}
};
/*------------------------------相关模型构造完毕-----------------------------------*/
//拖放程序
varSimpleDrag=Class.create();
SimpleDrag.prototype={
//拖放对象,触发对象,初始化
initialize:function(drag){
this.Drag=$(drag);
this._x=this._y=0;
this._fM=BindAsEventListener(this,this.Move);//_fM方法就是应用MOVE方法参数是event||window.event
this._fS=Bind(this,this.Stop);//_fS类方法就是Stop方法
this.Drag.style.position="absolute";
this.Drag.style.cursor="move";
addEventHandler(this.Drag,"mousedown",BindAsEventListener(this,this.Start));
},
//准备拖动
Start:function(oEvent){
this._x=oEvent.clientX-this.Drag.offsetLeft;
this._y=oEvent.clientY-this.Drag.offsetTop;
addEventHandler(document,"mousemove",this._fM);
addEventHandler(document,"mouseup",this._fS);
},
//拖动
Move:function(oEvent){
this.Drag.style.left=oEvent.clientX-this._x+"px";
this.Drag.style.top=oEvent.clientY-this._y+"px";
},
//停止拖动
Stop:function(){
removeEventHandler(document,"mousemove",this._fM);
removeEventHandler(document,"mouseup",this._fS);
}
};
//-->
</script>
<divid="idDrag"style="border:5pxsolid#0000FF;background:#C4E3FD;width:50px;height:50px;"></div>
<scripttype="text/javascript">
<!--
newSimpleDrag("idDrag");
//-->
</script>
</body>
</html>
更多关于JavaScript相关内容感兴趣的读者可查看本站专题：《JavaScript切换特效与技巧总结》、《JavaScript查找算法技巧总结》、《JavaScript动画特效与技巧汇总》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结》
希望本文所述对大家JavaScript程序设计有所帮助。