JS 移动Div层

 

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default2.aspx.cs" Inherits="Default2" %>

<!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 runat="server">
    <title>移动Div层</title>

</head>
<body onmousemove="window.status = 'X='+event.x+'Y='+event.y">
    <form id="form1" runat="server">
    <div>
 <div id="panl" style='position: absolute; left: 0px; top:0px ; background-color:Blue; width:900px ; height:600px ;'>
    </div>
        <input id="Button1" style="position:absolute; left: 0px; top:300px ; width:50px ; height:40px; " type="button" value="添加" onclick="addDiv()" />
        <input id="Button2" style="position:absolute; left:50px; top:300px; width:50px; height:40px;"  type="button" value="显示" onclick="saveDiv()">
    </div>
    <script language="javascript" type="text/javascript">
 // Arnold Elric  Date:07-10-10 
var myArray=new Array;  //全局变量
var Obj='';
var px=0;
var py=0;
var i=1;
function addDiv() //添加Div
{

var Name="Name"+i;
var x=Math.floor(Math.random()*(900-70));
var y=Math.floor(Math.random()*(600-70));
var arr=new Array();
arr[0]=Name;
arr[1]=x;
arr[2]=y;
myArray[myArray.length]=arr;

var str='';
str+="<div id="+Name+" style='position: absolute; left:"+x+"px; top:"+y+"px; background-color:Red; width:70px; height:70px;   ' onmousedown=MD(this) onmousemove=MM() onmouseup=MU() ><input id='img"+Name+" ' style=' width:30px; height:25px; 'type='button' value='关闭' onclick=closeDiv("+Name+") ></div></div>";
var Div=document.getElementById("panl");
Div.insertAdjacentHTML('beforeEnd',str);
i++;
}
function saveDiv() //显示Div 
{
 var str='';
 for(var i=0;i<myArray.length;i++)
 {
  str+="id: "+myArray[i][0]+" left:"+myArray[i][1]+"px"+" top:"+myArray[i][2]+"px"+"\n";
 }
  alert(str);


}
function closeDiv(DivID)  //关闭Div
{
 deleteDate(DivID);
 var div=document.getElementById("panl");
 div.removeChild(DivID);
}
function MD(object) //鼠标放下
{
 Obj=object.id;
 document.all(Obj).setCapture();
 px=event.x-document.all(Obj).style.pixelLeft; // 计算鼠标偏移
 py=event.y-document.all(Obj).style.pixelTop;  
}
function MM()   //鼠标移动
{
  if(Obj!='')
 {
  document.all(Obj).style.left=event.x-px;
  document.all(Obj).style.top=event.y-py;
  }
}
function MU() //鼠标抬起
{
 if(Obj!='')
 {
  document.all(Obj).releaseCapture();
  changeDate();
  Obj='';
 }
}
function changeDate() //移动Div后 改变数组中的值
{
 for(var i=0;i<myArray.length;i++)
 {
  if(Obj==myArray[i][0])
  {
   myArray[i][1]=event.x-px;
   myArray[i][2]=event.y-py;
  }
 }
}

function deleteDate(DivID)//删除存在数组中的那条Div 纪录
{
 for(var i=0;i<myArray.length;i++)
 {
  if(DivID.id==myArray[i][0])
  {
   myArray.splice(i,1);
  }
 }

}

</script>
    </form>
</body>
</html>
posted @ 2007-10-10 19:57 遭雷劈 阅读(864) 评论(2)  编辑 收藏 网摘

  回复  引用    
#1楼 2007-10-10 21:44 | 天极 [未注册用户]
http://www.cnblogs.com/ocean2000/archive/2007/09/12/890305.html
你看看这个
  回复  引用  查看    
#2楼 [楼主]2007-10-10 21:56 | 遭雷劈      
@1楼
怎么啦？？？我大致看了一下

标题  
姓名  
主页
Email (博主才能看到) 
验证码 *  看不清,换一张 [登录][注册]
内容(请不要发表任何与政治相关的内容)  
网站首页

新闻频道

社区

小组

博问

网摘

人才

找找看
  登录  使用高级评论  新用户注册  返回页首  恢复上次提交      
Google站内搜索

China-pub 计算机图书网上专卖店！6.5万品种 2-8折！
近千种 9-95 新二手计算图书火热销售中！
开发者征途系统新作：《设计模式——基于C#的工程化实现及扩展》



相关文章:

相关链接:

最新IT新闻:
谷歌李开复:我的传奇人生源于十句箴言
Twitter杀手Pownce被收购 两周内关闭服务
Live Search新增“即时返现”服务
MySpace CEO：明年广告营收仍会增长
2日科技博客精选：Windows占有率首次跌破90%