62,051
社区成员
发帖
与我相关
我的任务
分享
<html>
<head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><style> body {margin: 0px;padding: 0px;font-size: 12px;text-align: center;}
body > div {
text-align: center;
margin-right: auto;
margin-left: auto;
}
.content {
width: 900px;#0000ff;
}
.content .left {float: left;
width: 20%;
border: 1px solid #FF0000;
margin: 3px;
} .content .center {
float: left;
border: 1px solid #FF0000;
margin: 3px;
width: 57%
}
.content .right {
float: right;
width: 20%;
border: 1px solid #FF0000;
margin: 3px
}
.mo {
height: auto;
border: 1px solid #CCC;
margin: 3px;
background: #FFF
}
.mo h1 {
background: #afc9f6;
height: 18px;
padding: 3px;
cursor: move
}
.mo .nr {
height: 80px;
border: 1px solid #F3F3F3;
margin: 2px
}
h1 {
margin: 0px;
padding: 0px;
text-align: left;
font-size: 12px;
height: 20px
}
h1 span {
float: left
}
h1 font {
float: right;
cursor: pointer
}
</style>
<script>
var dragobj = {}; window.onerror = function(){return false;
}window.oDel = function(obj){if ($(obj) != null) {
$(obj).parentNode.removeChild($(obj)); }
}var domid = 12;function on_ini(){ String.prototype.inc = function(s){//string.inc()判断字符串中是否包含参数string,此处用来判断浏览器
return this.indexOf(s) > -1 ? true : false;
}
var agent = navigator.userAgent;//得到head,用来判断浏览器类型
window.isOpr = agent.inc("Opera");//Opera
window.isIE = agent.inc("IE") && !isOpr;//IE
window.isMoz = agent.inc("Mozilla") && !isOpr && !isIE;//Mozilla
if (isMoz) {
Event.prototype.__defineGetter__("x", function(){
return this.clientX + 2;
});
Event.prototype.__defineGetter__("y", function(){
return this.clientY + 2;
});
Event.prototype.__defineGetter__("srcElement", function(){
var node = this.target;
while (node.nodeType != 1) {
node = node.parentNode;
}
return node;
});
}
basic_ini();
}
function basic_ini(){
window.$ = function(obj){
return typeof(obj) == "string" ? document.getElementById(obj) : obj;
}
window.oDel = function(obj){
if ($(obj) != null) {
$(obj).parentNode.removeChild($(obj));
}
}
}
window.onload = function(){//页面加载初始化方法
on_ini();
var o = document.getElementsByTagName("h1");
for (var i = 0; i < o.length; i++) {
o[i].onmousedown = addevent;
}
}
function addevent(e){
if (dragobj.o != null)
return false;
e = e || event;
var ee = e.srcElement;
if (ee.tagName == "FONT")
return;
dragobj.o = this.parentNode;
dragobj.xy = getxy(dragobj.o);
dragobj.xx = new Array((e.x - dragobj.xy[1]), (e.y - dragobj.xy[0]));
dragobj.o.style.width = dragobj.xy[2] + "px";
dragobj.o.style.height = dragobj.xy[3] + "px";
dragobj.o.style.left = (e.x - dragobj.xx[0]) + "px";
dragobj.o.style.top = (e.y - dragobj.xx[1]) + "px";
dragobj.o.style.position = "absolute";
var om = document.createElement("div");
dragobj.otemp = om;
om.style.width = dragobj.xy[2] + "px";
om.style.height = dragobj.xy[3] + "px";
dragobj.o.parentNode.insertBefore(om, dragobj.o);
return false;
}
document.onselectstart = function(){
return false;
}
window.onfocus = function(){
document.onmouseup();
}
window.onblur = function(){
document.onmouseup();
}
document.onmouseup = function(){
if (dragobj.o != null) {
dragobj.o.style.width = "auto";
dragobj.o.style.height = "auto";
dragobj.otemp.parentNode.insertBefore(dragobj.o, dragobj.otemp);
dragobj.o.style.position = "";
oDel(dragobj.otemp);
dragobj = {};
}
}
document.onmousemove = function(e){
e = e || event;
if (dragobj.o != null) {
dragobj.o.style.left = (e.x - dragobj.xx[0]) + "px";
dragobj.o.style.top = (e.y - dragobj.xx[1]) + "px";
createtmpl(e);
}
}
function getxy(e){
var a = new Array();
var t = e.offsetTop;
var l = e.offsetLeft;
var w = e.offsetWidth;
var h = e.offsetHeight;
while (e = e.offsetParent) {
t += e.offsetTop;
l += e.offsetLeft;
}
a[0] = t;
a[1] = l;
a[2] = w;
a[3] = h
return a;
}
function inner(o, e){
var a = getxy(o);
if (e.x > a[1] && e.x < (a[1] + a[2]) && e.y > a[0] && e.y < (a[0] + a[3])) {
if (e.y < (a[0] + a[3] / 2))
return 1;
else
return 2;
}
else
return 0;
}
function createtmpl(e){
for (var i = 0; i < domid; i++) {
if (!$("m" + i))
continue;
if ($("m" + i) == dragobj.o)
continue;
var b = inner($("m" + i), e);
if (b == 0)
continue;
dragobj.otemp.style.width = $("m" + i).offsetWidth;
if (b == 1) {
$("m" + i).parentNode.insertBefore(dragobj.otemp, $("m" + i));
}
else {
if ($("m" + i).nextSibling == null) {
$("m" + i).parentNode.appendChild(dragobj.otemp);
}
else {
$("m" + i).parentNode.insertBefore(dragobj.otemp, $("m" + i).nextSibling);
}
}
return
}
for (var j = 0; j < 3; j++) {
if ($("dom" + j).innerHTML.inc("div") || $("dom" + j).innerHTML.inc("DIV"))
continue;
var op = getxy($("dom" + j));
if (e.x > (op[1] + 10) && e.x < (op[1] + op[2] - 10)) {
$("dom" + j).appendChild(dragobj.otemp);
dragobj.otemp.style.width = (op[2] - 10) + "px";
}
}
}
function add_div(){
var o = document.createElement("div");
o.className = "mo";
o.id = "m" + domid;
$('dom0').appendChild(o);
o.innerHTML = "<h1><span>新div</span><font onclick='del_div(this)'> x</font><font onclick=javascript:alert('edit')>edit </font></h1><div class=nr></div>";
o.getElementsByTagName("h1")[0].onmousedown = addevent;
domid++;
}
function del_div(obj){
var o = obj.parentNode.parentNode;
oDel(o);
}
</script>
</head>
<body>
<INPUT TYPE="button" value="添加DIV" onclick="add_div();">
<div class=content>
<div class=left id=dom0>
<div class=mo id=m3>
<h1><span>dom3</span>
<font onclick="del_div(this)">
x
</font>
</h1>
<div class="nr">
</div>
</div>
</div>
<div class=center id=dom1>
<div class=mo id=m6>
<h1><span>dom6</span>
<font onclick="del_div(this)">
x
</font>
</h1>
<div class="nr">
</div>
</div>
<div class=mo id=m7>
<h1><span>dom7</span>
<font onclick="del_div(this)">
x
</font>
</h1>
<div class="nr">
</div>
</div>
</div>
<div class=right id=dom2>
<div class=mo id=m11>
<h1><span>dom11</span>
<font onclick="del_div(this)">
x
</font>
</h1>
<div class="nr">
</div>
</div>
</div>
</div>
</body>
</html>