[转]最短的拖动代码
2010-07-10 11:21
253 查看
1.
<!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 language="JavaScript" type="text/javascript">
var x,y
var drag_=false
var D=new Function('obj','return document.getElementById(obj);')//更改这名以便针对特定的浏览器 如Opera的判断navigator.appName.indexOf("Opera")
var IE=new Function('','if(navigator.appName.indexOf("Explorer")>=0)return 1;if(navigator.appName.indexOf("Netscape")>=0)return 2;if(navigator.appName.indexOf("Opera")>=3)return 3')
function Move_obj(obj){//1
D(obj).onmousedown=function(e){drag_=true//4
with(this){style.position="absolute";temp1=offsetLeft;temp2=offsetTop;//5
if(IE()==1){x=event.clientX;y=event.clientY//6
document.onmousemove=function(e){//7
if(drag_==false)return false
with(this){style.left=temp1+event.clientX-x+"px";style.top=temp2+event.clientY-y+"px"}
}//7
}//6
//此处增加||IE()==3||IE()==undefined
if(IE()==2||IE()==3||IE()==undefined){x=e.pageX;y=e.pageY;//8
document.onmousemove=function(e){//9
if(drag_==false)return false
with(this){style.left=temp1+e.pageX-x+"px";style.top=temp2+e.pageY-y+"px"}
}//9
}//8
}//5
document.onmouseup=new Function("drag_=false")
}//4
}//1
</script>
<body>
<div id="test" style="background-color:#0099CC;width:200px"onmouseover='Move_obj("test")'>这个是可以拖动的层</div>
2.<!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>
<title> New Document </title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<meta http-equiv="Content-Language" content="zh-CN" />
<meta name="Design Corp" content="myhhe.cn" />
<meta name="Designer" content="hayden" />
<meta name="Designer mail" content="QQ:3996992" />
<meta name="robots" content="hayden" />
<meta name="Keywords" content="" />
<meta name="Description" content="" />
<script language="JavaScript" type="text/javascript">
var drag_=false
var D=new Function('obj','return document.getElementById(obj);')
var oevent=new Function('e','if (!e) e = window.event;return e')
function Move_obj(obj){
var x,y;
D(obj).onmousedown=function(e){
drag_=true;
with(this){
style.position="absolute";var temp1=offsetLeft;var temp2=offsetTop;
x=oevent(e).clientX;y=oevent(e).clientY;
document.onmousemove=function(e){
if(!drag_)return false;
with(this){
style.left=temp1+oevent(e).clientX-x+"px";
style.top=temp2+oevent(e).clientY-y+"px";
}
}
}
document.onmouseup=new Function("drag_=false");
}
}
</script>
<body>
<div id="test" style="background-color:#0099CC;width:200px;height:100px;border:1px #000 solid;" onmouseover='Move_obj("test")'>这个是可以拖动的层</div>
</body>
</html>
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">
<meta http-equiv="content-script-type" content="text/javascript">
<meta http-equiv="content-style-type" content="text/css">
<title>DoDi Chat v1.0 Beta</title>
<style rel="stylesheet" type="text/css" media="all" />
<!--
body {
text-align:left;
margin:0;
font:normal 12px Verdana, Arial;
background:#FFEEFF
}
form {
margin:0;
font:normal 12px Verdana, Arial;
}
table,input {
font:normal 12px Verdana, Arial;
}
a:link,a:visited{
text-decoration:none;
color:#333333;
}
a:hover{
text-decoration:none;
color:#FF6600
}
#main {
width:400px;
position:absolute;
left:600px;
top:100px;
background:#EFEFFF;
text-align:left;
filter:Alpha(opacity=90)
}
#ChatHead {
text-align:right;
padding:3px;
border:1px solid #003399;
background:#DCDCFF;
font-size:11px;
color:#3366FF;
cursor:move;
}
#ChatHead a:link,#ChatHead a:visited, {
font-size:14px;
font-weight:bold;
padding:0 3px
}
#ChatBody {
border:1px solid #003399;
border-top:none;
padding:2px;
}
#ChatContent {
height:200px;
padding:6px;
overflow-y:scroll;
word-break: break-all
}
#ChatBtn {
border-top:1px solid #003399;
padding:2px
}
-->
</style>
<script language="javascript" type="text/javascript">
<!--
function $(d){return document.getElementById(d);}
function gs(d){var t=$(d);if (t){return t.style;}else{return null;}}
function gs2(d,a){
if (d.currentStyle){
var curVal=d.currentStyle[a]
}else{
var curVal=document.defaultView.getComputedStyle(d, null)[a]
}
return curVal;
}
function ChatHidden(){gs("ChatBody").display = "none";}
function ChatShow(){gs("ChatBody").display = "";}
function ChatClose(){gs("main").display = "none";}
function ChatSend(obj){
var o = obj.ChatValue;
if (o.value.length>0){
$("ChatContent").innerHTML += "<strong>Akon说：</strong>"+o.value+"<br/>";
o.value='';
}
}
if (document.getElementById){
(
function(){
if (window.opera){ document.write("<input type='hidden' id='Q' value=' '>"); }
var n = 500;
var dragok = false;
var y,x,d,dy,dx;
function move(e)
{
if (!e) e = window.event;
if (dragok){
d.style.left = dx + e.clientX - x + "px";
d.style.top = dy + e.clientY - y + "px";
return false;
}
}
function down(e){
if (!e) e = window.event;
var temp = (typeof e.target != "undefined")?e.target:e.srcElement;
if (temp.tagName != "HTML"|"BODY" && temp.className != "dragclass"){
temp = (typeof temp.parentNode != "undefined")?temp.parentNode:temp.parentElement;
}
if('TR'==temp.tagName){
temp = (typeof temp.parentNode != "undefined")?temp.parentNode:temp.parentElement;
temp = (typeof temp.parentNode != "undefined")?temp.parentNode:temp.parentElement;
temp = (typeof temp.parentNode != "undefined")?temp.parentNode:temp.parentElement;
}
if (temp.className == "dragclass"){
if (window.opera){ document.getElementById("Q").focus(); }
dragok = true;
temp.style.zIndex = n++;
d = temp;
dx = parseInt(gs2(temp,"left"))|0;
dy = parseInt(gs2(temp,"top"))|0;
x = e.clientX;
y = e.clientY;
document.onmousemove = move;
return false;
}
}
function up(){
dragok = false;
document.onmousemove = null;
}
document.onmousedown = down;
document.onmouseup = up;
}
)();
}
-->
</script>
</head>
<body>
<div id="main" class="dragclass" style="left:600px;top:300px;">
<div id="ChatHead">
<a href="#" onclick="ChatHidden();">-</a>
<a href="#" onclick="ChatShow();">+</a>
<a href="#" onclick="ChatClose();">x</a>
</div>
<div id="ChatBody">
<div id="ChatContent"></div>
<div id="ChatBtn">
<form action="" name="chat" method="post">
<textarea name="ChatValue" rows="3" style="width:350px"></textarea>
<input name="Submit" type="button" value="Chat" onclick="ChatSend(this.form);" />
</form>
</div>
</div>
</div>
</body>
</html>
<!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 language="JavaScript" type="text/javascript">
var x,y
var drag_=false
var D=new Function('obj','return document.getElementById(obj);')//更改这名以便针对特定的浏览器 如Opera的判断navigator.appName.indexOf("Opera")
var IE=new Function('','if(navigator.appName.indexOf("Explorer")>=0)return 1;if(navigator.appName.indexOf("Netscape")>=0)return 2;if(navigator.appName.indexOf("Opera")>=3)return 3')
function Move_obj(obj){//1
D(obj).onmousedown=function(e){drag_=true//4
with(this){style.position="absolute";temp1=offsetLeft;temp2=offsetTop;//5
if(IE()==1){x=event.clientX;y=event.clientY//6
document.onmousemove=function(e){//7
if(drag_==false)return false
with(this){style.left=temp1+event.clientX-x+"px";style.top=temp2+event.clientY-y+"px"}
}//7
}//6
//此处增加||IE()==3||IE()==undefined
if(IE()==2||IE()==3||IE()==undefined){x=e.pageX;y=e.pageY;//8
document.onmousemove=function(e){//9
if(drag_==false)return false
with(this){style.left=temp1+e.pageX-x+"px";style.top=temp2+e.pageY-y+"px"}
}//9
}//8
}//5
document.onmouseup=new Function("drag_=false")
}//4
}//1
</script>
<body>
<div id="test" style="background-color:#0099CC;width:200px"onmouseover='Move_obj("test")'>这个是可以拖动的层</div>
2.<!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>
<title> New Document </title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<meta http-equiv="Content-Language" content="zh-CN" />
<meta name="Design Corp" content="myhhe.cn" />
<meta name="Designer" content="hayden" />
<meta name="Designer mail" content="QQ:3996992" />
<meta name="robots" content="hayden" />
<meta name="Keywords" content="" />
<meta name="Description" content="" />
<script language="JavaScript" type="text/javascript">
var drag_=false
var D=new Function('obj','return document.getElementById(obj);')
var oevent=new Function('e','if (!e) e = window.event;return e')
function Move_obj(obj){
var x,y;
D(obj).onmousedown=function(e){
drag_=true;
with(this){
style.position="absolute";var temp1=offsetLeft;var temp2=offsetTop;
x=oevent(e).clientX;y=oevent(e).clientY;
document.onmousemove=function(e){
if(!drag_)return false;
with(this){
style.left=temp1+oevent(e).clientX-x+"px";
style.top=temp2+oevent(e).clientY-y+"px";
}
}
}
document.onmouseup=new Function("drag_=false");
}
}
</script>
<body>
<div id="test" style="background-color:#0099CC;width:200px;height:100px;border:1px #000 solid;" onmouseover='Move_obj("test")'>这个是可以拖动的层</div>
</body>
</html>
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">
<meta http-equiv="content-script-type" content="text/javascript">
<meta http-equiv="content-style-type" content="text/css">
<title>DoDi Chat v1.0 Beta</title>
<style rel="stylesheet" type="text/css" media="all" />
<!--
body {
text-align:left;
margin:0;
font:normal 12px Verdana, Arial;
background:#FFEEFF
}
form {
margin:0;
font:normal 12px Verdana, Arial;
}
table,input {
font:normal 12px Verdana, Arial;
}
a:link,a:visited{
text-decoration:none;
color:#333333;
}
a:hover{
text-decoration:none;
color:#FF6600
}
#main {
width:400px;
position:absolute;
left:600px;
top:100px;
background:#EFEFFF;
text-align:left;
filter:Alpha(opacity=90)
}
#ChatHead {
text-align:right;
padding:3px;
border:1px solid #003399;
background:#DCDCFF;
font-size:11px;
color:#3366FF;
cursor:move;
}
#ChatHead a:link,#ChatHead a:visited, {
font-size:14px;
font-weight:bold;
padding:0 3px
}
#ChatBody {
border:1px solid #003399;
border-top:none;
padding:2px;
}
#ChatContent {
height:200px;
padding:6px;
overflow-y:scroll;
word-break: break-all
}
#ChatBtn {
border-top:1px solid #003399;
padding:2px
}
-->
</style>
<script language="javascript" type="text/javascript">
<!--
function $(d){return document.getElementById(d);}
function gs(d){var t=$(d);if (t){return t.style;}else{return null;}}
function gs2(d,a){
if (d.currentStyle){
var curVal=d.currentStyle[a]
}else{
var curVal=document.defaultView.getComputedStyle(d, null)[a]
}
return curVal;
}
function ChatHidden(){gs("ChatBody").display = "none";}
function ChatShow(){gs("ChatBody").display = "";}
function ChatClose(){gs("main").display = "none";}
function ChatSend(obj){
var o = obj.ChatValue;
if (o.value.length>0){
$("ChatContent").innerHTML += "<strong>Akon说：</strong>"+o.value+"<br/>";
o.value='';
}
}
if (document.getElementById){
(
function(){
if (window.opera){ document.write("<input type='hidden' id='Q' value=' '>"); }
var n = 500;
var dragok = false;
var y,x,d,dy,dx;
function move(e)
{
if (!e) e = window.event;
if (dragok){
d.style.left = dx + e.clientX - x + "px";
d.style.top = dy + e.clientY - y + "px";
return false;
}
}
function down(e){
if (!e) e = window.event;
var temp = (typeof e.target != "undefined")?e.target:e.srcElement;
if (temp.tagName != "HTML"|"BODY" && temp.className != "dragclass"){
temp = (typeof temp.parentNode != "undefined")?temp.parentNode:temp.parentElement;
}
if('TR'==temp.tagName){
temp = (typeof temp.parentNode != "undefined")?temp.parentNode:temp.parentElement;
temp = (typeof temp.parentNode != "undefined")?temp.parentNode:temp.parentElement;
temp = (typeof temp.parentNode != "undefined")?temp.parentNode:temp.parentElement;
}
if (temp.className == "dragclass"){
if (window.opera){ document.getElementById("Q").focus(); }
dragok = true;
temp.style.zIndex = n++;
d = temp;
dx = parseInt(gs2(temp,"left"))|0;
dy = parseInt(gs2(temp,"top"))|0;
x = e.clientX;
y = e.clientY;
document.onmousemove = move;
return false;
}
}
function up(){
dragok = false;
document.onmousemove = null;
}
document.onmousedown = down;
document.onmouseup = up;
}
)();
}
-->
</script>
</head>
<body>
<div id="main" class="dragclass" style="left:600px;top:300px;">
<div id="ChatHead">
<a href="#" onclick="ChatHidden();">-</a>
<a href="#" onclick="ChatShow();">+</a>
<a href="#" onclick="ChatClose();">x</a>
</div>
<div id="ChatBody">
<div id="ChatContent"></div>
<div id="ChatBtn">
<form action="" name="chat" method="post">
<textarea name="ChatValue" rows="3" style="width:350px"></textarea>
<input name="Submit" type="button" value="Chat" onclick="ChatSend(this.form);" />
</form>
</div>
</div>
</div>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 兼容IE FF Opera的javascript最短的拖动代码
- 兼容IE FF Opera的javascript最短的拖动代码
- javascript最短的拖动代码[兼容FF]
- javascript最短的拖动代码[兼容FF]
- 最短路径实现代码-->Dijkstra求解最短路径问题
- Javascript实现的类似Google的Div拖动效果代码
- JS实现拖动示例代码
- js实现拉伸拖动iframe的具体代码
- asp最短的无组件上传代码（转）
- ajax拖动层，保存层位置，这段代码是从网络人扒拉下来的（非XAJAX），使用类库prototype.js，感觉效果非常好
- 基于jquery的一行代码轻松实现拖动效果
- WinForm窗体拖动代码
- JQuery拖动表头边框线调整表格列宽效果代码
- 分享：代码非常简洁且兼容多浏览器的拖动层
- cocos2d-x 拖动效果 成功代码及截图
- leetcode 95. Unique Binary Search Trees II | Java最短代码实现
- 拖动手势实现代码
- leetcode 215. Kth Largest Element in an Array | Java最短代码实现
- HTML－－如何实现通过鼠标事件拖动页面图像(代码)
- Jquery写一个鼠标拖动效果实现原理与代码