随笔-68  评论-89  文章-0 

DIV拖动实例

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>

<title>mytest-javapig</title>
<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">


<style type="text/css">
.dragclass{
position : relative;
cursor : move;
}
</style>


<script type="text/javascript">


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;
 }
//如果事件是发生在 TR标签,则..
if('TR'==temp.tagName){
//指向 TBODY 标签
temp = (typeof temp.parentNode != "undefined")?temp.parentNode:temp.parentElement;
//指向 TABLE 标签
temp = (typeof temp.parentNode != "undefined")?temp.parentNode:temp.parentElement;
//指向 DIV 标签,这样就可以移动啦
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(temp.style.left+0);
 dy = parseInt(temp.style.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>


<p class="dragclass" style="top:0px;left:0px;width:200px;text-align:center;background-color:#ff0000;color:#ffffff">
P tag
</p>

 

<b class="dragclass" style="top:0px;left:0px;background-color:#f40084;color:#ffffff">
B tag
</b>

<div id="test" class="dragclass" style="position:absolute;top:330px;left:160px;height:20px;width:150px;background-color:#a65000;color:#ffffff">
Div: Absolute position
</div>

<div class="dragclass" style="position:absolute;top:143px;left:120px;height:20px;width:150px;">
  <table width="100%" height="25" border="0" cellpadding="0" cellspacing="0" bgcolor="#CCCCCC">
  <tr>
    <td>Table</td>
    </tr>
</table>
</div>


<div class="dragclass" style="position:absolute;top:96px;left:152px;height:20px;width:53px;">
<img src="http://www.blueidea.com/articleimg/bbsimg/icon9.gif" width="69" height="69">
</div>

<div class="dragclass" style="position:absolute;top:60px;left:229px;height:20px;width:53px;">
<input name="" type="button" value="Button">

<div class="dragclass">
  <table width="100%" border="1" cellpadding="0" cellspacing="1" bordercolor="#FFFFFF" bgcolor="#FFB059">
    <tr>
      <td height="20" bgcolor="#FFDFBB">&nbsp;<strong>&nbsp;这个动弹不得 </strong></td>
    </tr>
  </table>
</div>

</body>
</html> 

posted on 2007-06-09 10:00 噢耶游戏 阅读(...) 评论(...) 编辑 收藏