如何编写一个js,适用于所有浏览器可用鼠标在页面移动的DIV层?
3个回答
展开全部
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<script type="text/javascript" >
String.prototype.getPxNumber=function(){
return Number(this.substr(0,(this.length-2)));
}//扩展字符串对象的方法。。可以把n px中的n以数字的形式返回。
function $(id){
return document.getElementById(id);
}
var dragControll={
oldMouseX:0,
oldMouseY:0,
oldObjectX:0,
oldObjectY:0,
dragTarget:null,
record:function(id,msg)
{
$(id).innerHTML=msg;
},
startMove:function(evt)
{
this.recordPosition(evt);
},
endMove:function(evt)
{
this.recordPosition(evt);
this.dragTarget=null;
},
recordPosition:function(evt)
{
var eventHappen=window.event ? window.event:evt;
this.dragTarget=eventHappen.target ? eventHappen.target:evenHappen.srcElement;
this.oldMouseX=eventHappen.clientX;
this.oldMouseY=eventHappen.clientY;
this.oldObjectX=this.dragTarget.style.left.getPxNumber();
this.oldObjectY=this.dragTarget.style.top.getPxNumber();
this.record("recordSpan","MouseX:"+this.oldMouseX+" MouseY:"+this.oldMouseY+" dragTargetX:"+this.oldObjectX+" dragTargetY:"+this.oldObjectY);
},
moving: function(evt){
var eventHappen=window.event ? window.event:evt;
var movingTarget=eventHappen.target ? eventHappen.target:eventHappen.srcElement;
if(movingTarget==this.dragTarget){
movingTarget.style.left=String(this.oldObjectX+eventHappen.clientX-this.oldMouseX)+"px";
movingTarget.style.top=String(this.oldObjectY+eventHappen.clientY-this.oldMouseY)+"px";
//alert("!");
}
}
}
</script>
</head>
<body>
<div>
<span id="recordSpan">recording...</span>
</div>
<div style="height:100px; width:100px; background-color:#00CC00; top:100px;left:100px; position:absolute" onmousedown="dragControll.startMove(event)" onmouseup="dragControll.endMove(event)" onmousemove="dragControll.moving(event)" ></div>
</body>
</html>
。。。
刚写的，试试。
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<script type="text/javascript" >
String.prototype.getPxNumber=function(){
return Number(this.substr(0,(this.length-2)));
}//扩展字符串对象的方法。。可以把n px中的n以数字的形式返回。
function $(id){
return document.getElementById(id);
}
var dragControll={
oldMouseX:0,
oldMouseY:0,
oldObjectX:0,
oldObjectY:0,
dragTarget:null,
record:function(id,msg)
{
$(id).innerHTML=msg;
},
startMove:function(evt)
{
this.recordPosition(evt);
},
endMove:function(evt)
{
this.recordPosition(evt);
this.dragTarget=null;
},
recordPosition:function(evt)
{
var eventHappen=window.event ? window.event:evt;
this.dragTarget=eventHappen.target ? eventHappen.target:evenHappen.srcElement;
this.oldMouseX=eventHappen.clientX;
this.oldMouseY=eventHappen.clientY;
this.oldObjectX=this.dragTarget.style.left.getPxNumber();
this.oldObjectY=this.dragTarget.style.top.getPxNumber();
this.record("recordSpan","MouseX:"+this.oldMouseX+" MouseY:"+this.oldMouseY+" dragTargetX:"+this.oldObjectX+" dragTargetY:"+this.oldObjectY);
},
moving: function(evt){
var eventHappen=window.event ? window.event:evt;
var movingTarget=eventHappen.target ? eventHappen.target:eventHappen.srcElement;
if(movingTarget==this.dragTarget){
movingTarget.style.left=String(this.oldObjectX+eventHappen.clientX-this.oldMouseX)+"px";
movingTarget.style.top=String(this.oldObjectY+eventHappen.clientY-this.oldMouseY)+"px";
//alert("!");
}
}
}
</script>
</head>
<body>
<div>
<span id="recordSpan">recording...</span>
</div>
<div style="height:100px; width:100px; background-color:#00CC00; top:100px;left:100px; position:absolute" onmousedown="dragControll.startMove(event)" onmouseup="dragControll.endMove(event)" onmousemove="dragControll.moving(event)" ></div>
</body>
</html>
。。。
刚写的，试试。
本回答由提问者推荐
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
微测检测5.10
2023-05-10 广告
您好！建议咨 深圳市微测检测有限公司，已建立起十余个专业实验室，企业通过微测检测就可以获得一站式的测试与认 证解决方案；(EMC、RF、MFi、BQB、QI、USB、安全、锂电池、快充、汽车电子EMC、汽车手机互 联、语音通话质量），认证遇...
点击进入详情页
本回答由微测检测5.10提供
展开全部
去搜搜 jquery div拖动插件吧，有很多现成的实例，而且兼容性很好的，不需要自己写！
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
更多回答（1）
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
