CSS+DIV+JS實現拖動層效果
瀏覽量：4513
<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>可拖動的div</title>
<style rel="stylesheet" type="text/css" media="all" />
<!--
#diamondCompareList {
width:400px;
position:absolute;
left:600px;
top:100px;
background:#EFEFFF;
text-align:left;
}
#ChatHead {
text-align:right;
padding:3px;
border:1px solid #003399;
background:#DCDCFF;
font-size:11px;
color:#3366FF;
cursor:move;
}
-->
</style>
<script language="javascript" type="text/javascript">
<!--
function hd(d){return document.getElementById(d);}
function gs(d){var t=hd(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 DiamondHidden(){gs("diamondCompareList").display = "none";}
function DiamondShow(){gs("diamondCompareList").display = "";}
function DiamondClose(){gs("main").display = "none";}
function ChatSend(obj){
var o = obj.ChatValue;
if (o.value.length>0){
hd("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 style="left: 0px; top: 512px; cursor: move;" id="diamondCompareList" class="dragclass" style="left:600px;top:300px;" class="span-5 diamond_compare_list">
<div class="title border_1" id="ChatHead">
<span>鉆石對比</span>
<input class="close" value="關閉" type="button">
</div>
<div class="text d_compare_list" id="ChatContent">
<ol id='oldb'></ol>
<input id="clearCompare" class="compare" value="清空對比" type="button">
<input id="gotoCompare" class="compare" value="查看對比" type="button">
</div>
</div>
width:400px;
position:absolute;
left:600px;
top:100px;
background:#EFEFFF;
text-align:left;
}
#ChatHead {
text-align:right;
padding:3px;
border:1px solid #003399;
background:#DCDCFF;
font-size:11px;
color:#3366FF;
cursor:move;
}
-->
</style>
<script language="javascript" type="text/javascript">
<!--
function hd(d){return document.getElementById(d);}
function gs(d){var t=hd(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 DiamondHidden(){gs("diamondCompareList").display = "none";}
function DiamondShow(){gs("diamondCompareList").display = "";}
function DiamondClose(){gs("main").display = "none";}
function ChatSend(obj){
var o = obj.ChatValue;
if (o.value.length>0){
hd("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 style="left: 0px; top: 512px; cursor: move;" id="diamondCompareList" class="dragclass" style="left:600px;top:300px;" class="span-5 diamond_compare_list">
<div class="title border_1" id="ChatHead">
<span>鉆石對比</span>
<input class="close" value="關閉" type="button">
</div>
<div class="text d_compare_list" id="ChatContent">
<ol id='oldb'></ol>
<input id="clearCompare" class="compare" value="清空對比" type="button">
<input id="gotoCompare" class="compare" value="查看對比" type="button">
</div>
</div>
</body>
</html>
上一篇：簡單的json串生成