您的位置：首页 > 其它

动态添加diV,实现了拖拽功能

2012-05-21 14:52 267 查看 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<script>
function creatediv()
{
var obj = document.createElement("div");
classA.call(obj);
bd.appendChild(obj);
}

function classA(){

this.style.width="100";
this.style.height="100";
this.style.background="blue";
this.style.border="solid 10 red ";
//this.style.display="inline";
this.style.position="absolute";   //relative
//   this.style.left=50;
//   this.style.top=50;
this.onmousedown=function()
{down(this)};
this.onmousemove=function()
{move(this)};
this.onmouseup=function()
{up(this)};

}

var flag=0;
function down(aa){
flag=1;
}
function move(aa)
{
if(flag==1)
{
aa.style.left=event.x-50;
aa.style.top=event.y-50;
}
}
function up(aa){
flag=0;
}
</script>
</HEAD>

<BODY id="bd" >
<input type ="button"  onclick="creatediv();"  value="创建" />
</BODY>
</HTML>


down() ,move() ,up() 这3个函数是实现拖拽功能的！其实你可以不要它。

call方法是一个回调方法，每点击一下call就回调classA()这个函数一次。
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航