把一个面向过程的拖拽改成一个面向对象的拖拽，特么的怎么就不兼容火狐了，之前还是好的，也是醉了
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
</head>
<style type="text/css">
*{padding:0; margin:0; list-style:none;}
#div1{ width:100px; height:100px; line-height:100px; text-align:center; font-size:30px;
color:#fff; background:red; position:absolute; left:0; top:0;}
</style>
<body>
<div id="div1">A</div>
<script type="text/javascript">
/*window.onload=function(){
var oDiv=document.getElementById("div1");
oDiv.onmousedown=function(ev){
var oEvent = ev || event;
var disX=oEvent.clientX-oDiv.offsetLeft;
var disY=oEvent.clientY-oDiv.offsetTop;
console.log(disX+'+'+disY);
document.onmousemove=function(ev){
var oEvent = ev || event;
oDiv.style.left=oEvent.clientX-disX+'px';
oDiv.style.top=oEvent.clientY-disY+'px';
console.log(oEvent.clientX+'+'+oEvent.clientY);
}
document.onmouseup=function(ev){
document.onmousemove=null;
document.onmouseup=null;
}
}
}*/
/*面向对象*/
window.onload=function(){
var obj=new Drag("div1");
}
function Drag(id){
var _this=this;
this.disX=0;
this.disY=0;
this.oDiv=document.getElementById(id);
this.oDiv.onmousedown=function(){
_this.fnDown();
}
}
Drag.prototype.fnDown=function(ev){
var _this=this;
var oEvent=ev || event;
this.disX=oEvent.clientX-this.oDiv.offsetLeft;
this.disY=oEvent.clientY-this.oDiv.offsetTop;
document.onmousemove=function(){
_this.fnMove();
}
document.onmouseup=function(){
_this.fnUp();
}
}
Drag.prototype.fnMove=function(ev){
var oEvent = ev || event;
this.oDiv.style.left=oEvent.clientX-this.disX+'px';
this.oDiv.style.top=oEvent.clientY-this.disY+'px';
}
Drag.prototype.fnUp=function(){
document.onmousemove=null;
document.onmouseup=null;
}
</script>
</body>
</html>
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
事件都没传进去，肯定报错啊。
全改成这种：