<!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">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<head runat="server">
<title>Untitled Page</title>
<script type="text/javascript">
//添加层
var num=1;
function CreateDiv()
{
var box = document.createElement("div");
box.id= "div_"+num;
box.setAttribute("onclick","divId('div_"+num+"')");
box.style.width="100px";
box.style.height="100px"
box.style.backgroundColor="#ffccff";
box.innerHTML="fsfsafasf"+num;
document.getElementById("div_pannel").appendChild(box);
box.onclick = divId;
// document.getElementById('text'+num).focus();
num+=1; }//删除
function delBotton(a){
document.getElementById('div_pannel').removeChild(a)
}
//得到要删除的DIV的ID
function divId(){
//this.style.border = '1px solid blue';
this.style.backgroundColor="yellow";
var that = this;
document.getElementById('shanchu').onclick = function(){
document.getElementById('div_pannel').removeChild(that);
var divs = document.getElementById('div_pannel').getElementsByTagName('div');
for(var i = 0; i < divs.length; i++){
divs[i].innerHTML="fsfsafasf"+(i+1);
}
num = divs.length+1;
};
}
</script>
</head>
<body>
<form id="form1" runat="server">
<input type="button" value="新增" onclick="CreateDiv()" /><input type="button" value="删除" id="shanchu" />
<div id="div_pannel">
</div>
</form></body>
</html>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<head runat="server">
<title>Untitled Page</title>
<script type="text/javascript">
//添加层
var num=1;
function CreateDiv()
{
var box = document.createElement("div");
box.id= "div_"+num;
box.setAttribute("onclick","divId('div_"+num+"')");
box.style.width="100px";
box.style.height="100px"
box.style.backgroundColor="#ffccff";
box.innerHTML="fsfsafasf"+num;
document.getElementById("div_pannel").appendChild(box);
box.onclick = divId;
// document.getElementById('text'+num).focus();
num+=1; }//删除
function delBotton(a){
document.getElementById('div_pannel').removeChild(a)
}
//得到要删除的DIV的ID
function divId(){
//this.style.border = '1px solid blue';
this.style.backgroundColor="yellow";
var that = this;
document.getElementById('shanchu').onclick = function(){
document.getElementById('div_pannel').removeChild(that);
var divs = document.getElementById('div_pannel').getElementsByTagName('div');
for(var i = 0; i < divs.length; i++){
divs[i].innerHTML="fsfsafasf"+(i+1);
}
num = divs.length+1;
};
}
</script>
</head>
<body>
<form id="form1" runat="server">
<input type="button" value="新增" onclick="CreateDiv()" /><input type="button" value="删除" id="shanchu" />
<div id="div_pannel">
</div>
</form></body>
</html>
<body id="pid"></body>
<script>
function Drag(pid, cssText, className, divId){
var D = this;
var P = document.getElementById(pid);
var div = null;
var allowMove = false;
var width = 0;
var height = 0
var browserType = "ie";
var zIndex = 10;
if(navigator.userAgent.toLowerCase().indexOf("firefox") > 0){
browserType = "firefox";
}else if(navigator.userAgent.toLowerCase().indexOf("chrome") > 0){
browserType = "chrome";
}
if(window["zIndex"]){
zIndex = window["zIndex"];
}
var div = document.createElement("div");
if(cssText){
div.style.cssText = cssText;
}
if(className){
div.className = className;
}
if(divId){
div.id = divId;
}else{
div.id = "div" + parseInt(Math.random() * 10000) + "" + parseInt(Math.random() * 10000);
}
if(!div.style.left){
div.style.left = "0px";
}
if(!div.style.top){
div.style.top = "0px";
}
if(div.style.position != "absolute"){
div.style.position = "absolute";
}
if(!div.style.zIndex){
div.style.zIndex = ++zIndex;
}
if(browserType == "ie"){
div.style.filter = "alpha(opacity=0)";
}else{
div.style.opacity = "0";
}
div.onmousedown = function(){
if(browserType == "firefox"){
window.onmousemove = function(event){
e = event || window.event;
D.move(e);
}
window.onmouseup = function(event){
e = event || window.event;
allowMove = false;
}
}else{
P.onmousemove = function(event){
e = event || window.event;
D.move(e);
}
P.onmouseup = function(event){
e = event || window.event;
allowMove = false;
}
}
D.downUp(e, 1);
}
div.onmouseup = function(event){
e = event || window.event;
D.downUp(e, 0);
}
div.onmousemove = function(event){
e = event || window.event;
D.move(e);
} this.show = function(div){
function startShow(){
if(browserType == "ie"){
var opacity = parseInt(div.style.filter.match(/\d+/));
if(opacity >= 100){
clearInterval(siv);
}
div.style.filter = "alpha(opacity=" + (++opacity) + ")";
}else{
var opacity = parseFloat(div.style.opacity);
if(opacity >= 1){
clearInterval(siv);
}
div.style.opacity = opacity + 0.01;
}
}
var siv = setInterval(startShow, 10);
}
this.close = function(){
this.parentNode.parentNode.removeChild(this.parentNode);
}
div.show = function(){
var b = document.createElement("b");
b.innerHTML = "close";
b.style.cssText = "cursor:pointer;margin-left:110px;width:20px";
b.onclick = D.close;
this.appendChild(b); P.appendChild(this);
D.show(this);
}
div.show(); this.downUp = function(e, type){
var opacity = 0.5;
if(type){
allowMove = true;
if(window["zIndex"]){
zIndex = window["zIndex"];
}
div.style.zIndex = ++zIndex;
window["zIndex"] = zIndex;
}else{
allowMove = false;
opacity = 1;
}
width = e.clientX - parseInt(div.style.left);
height = e.clientY - parseInt(div.style.top);
if(browserType == "ie"){
div.style.filter = "alpha(opacity=" + (opacity * 100) + ")";
}else{
div.style.opacity = opacity;
}
} this.move = function(e){
if(!allowMove){
return false;
}
div.style.left = e.clientX - width + "px";
div.style.top = e.clientY - height + "px";
}
}function create(){
cssText = "-moz-user-select: none; -webkit-user-select: none; background: #D5D3EB; width: 150px; height: 100px; border: 0.0cm #CCCCFF solid; cursor: pointer; position: absolute; left: " + parseInt(Math.random() * 500) + "; top: " + parseInt(Math.random() * 500);
new Drag("pid", cssText);
}
</script>
<input type="button" value="创建" onclick="create()">