js拖拽添加htmldom,JavaScript实现DIV层拖动及动态增加新层的方法

本文实例讲述了Javascript实现DIV层拖动及动态增加新层的方法。分享给大家供大家参考。具体分析如下&＃xff1a;

无刷新添加一个新的DIV层&＃xff0c;并可实现的该层的拖动&＃xff0c;鼠标拖动层可移动位置&＃xff0c;将JS部分另存为一个新文件&＃xff0c;用到的时候从外部引入&＃xff0c;这个拖动层代码很流行&＃xff0c;GG和YAHOO等大网站经常可以看到这种效果。

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;}

.content .left{

float:left;

width:20%;

border:1px solid #0066CC;

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:#ECF9FF;

height:18px;

padding:3px;

cursor:move

}

.closediv{

cursor:default;

}

.minusspan{

cursor:default;

}

.mo .nr{

height:80px;

border:1px solid #F3F3F3;

margin:2px

}

h1{

margin:0px;

padding:0px;

text-align:left;

font-size:12px

}

.dragging {

FILTER: progid:DXImageTransform.Microsoft.Alpha(opacity&＃61;60);

opacity: 0.6;

moz-opacity: 0.6

}

var dragobj&＃61;{}

window.οnerrοr&＃61;function(){return false}

var domid&＃61;12

function on_ini(){

String.prototype.inc&＃61;function(s){return this.indexOf(s)>-1?true:false}

var agent&＃61;navigator.userAgent

window.isOpr&＃61;agent.inc("Opera")

window.isIE&＃61;agent.inc("IE") && !isOpr

window.isMoz&＃61;agent.inc("Mozilla") && !isOpr && !isIE

if(isMoz){

Event.prototype.__defineGetter__("x",function(){return this.clientX&＃43;2})

Event.prototype.__defineGetter__("y",function(){return this.clientY&＃43;2})

}

basic_ini()

}

function basic_ini(){

window.$&＃61;function(obj){return typeof(obj)&＃61;&＃61;"string"?document.getElementById(obj):obj}

window.oDel&＃61;function(obj){if($(obj)!&＃61;null){$(obj).parentNode.removeChild($(obj))}}

}

window.oDel&＃61;function(obj){if($(obj)!&＃61;null){$(obj).parentNode.removeChild($(obj))}}

window.οnlοad&＃61;function(){

on_ini()

var o&＃61;document.getElementsByTagName("h1")

for(var i&＃61;0;i

o[i].οnmοusedοwn&＃61;addevent;

//添加折叠和关闭按钮

var tt &＃61; document.createElement("div");

tt.style.cssText &＃61; "float:left";

var span &＃61; document.createElement("span");

span.innerHTML &＃61; "--"&＃43;o[i].innerHTML;

span.style.cssText &＃61; "cursor:default;";

span.onmousedown &＃61; minusDiv;

tt.appendChild(span);

var close &＃61; document.createElement("div");

close.innerHTML &＃61; "X";

close.style.cssText &＃61; "cursor:default;float:right";

close.onmousedown &＃61; closeDiv;

o[i].innerHTML &＃61; "";

o[i].appendChild(tt);

o[i].appendChild(close);

}

}

//折叠或者显示层

function minusDiv(e)

{

e&＃61;e||event

var nr &＃61; this.parentNode.parentNode.nextSibling; //取得内容层

nr.style.display &＃61; nr.style.display&＃61;&＃61;""?"none":"";

}

//移出层

function closeDiv(e)

{

e&＃61;e||event

var mdiv &＃61; this.parentNode.parentNode; //取得目标层

oDel(mdiv);

}

function addevent(e){

if(dragobj.o!&＃61;null)

return false

e&＃61;e||event

dragobj.o&＃61;this.parentNode

dragobj.xy&＃61;getxy(dragobj.o)

dragobj.xx&＃61;new Array((e.x-dragobj.xy[1]),(e.y-dragobj.xy[0]))

//dragobj.o.className &＃61; &＃39;dragging&＃39;;

dragobj.o.style.width&＃61;dragobj.xy[2]&＃43;"px"

dragobj.o.style.height&＃61;dragobj.xy[3]&＃43;"px"

dragobj.o.style.left&＃61;(e.x-dragobj.xx[0])&＃43;"px"

dragobj.o.style.top&＃61;(e.y-dragobj.xx[1])&＃43;"px"

dragobj.o.style.position&＃61;"absolute"

dragobj.o.style.filter&＃61;&＃39;alpha(opacity&＃61;60)&＃39;; //添加拖动透明效果

var om&＃61;document.createElement("div")

dragobj.otemp&＃61;om

om.style.width&＃61;dragobj.xy[2]&＃43;"px"

om.style.height&＃61;dragobj.xy[3]&＃43;"px"

om.style.border &＃61; "1px dashed red"; //ikaiser添加&＃xff0c;实现虚线框

dragobj.o.parentNode.insertBefore(om,dragobj.o)

return false

}

document.onselectstart&＃61;function(){return false}

window.οnfοcus&＃61;function(){document.onmouseup()}

window.οnblur&＃61;function(){document.onmouseup()}

document.οnmοuseup&＃61;function(){

if(dragobj.o!&＃61;null){

dragobj.o.style.width&＃61;"auto"

dragobj.o.style.height&＃61;"auto"

dragobj.otemp.parentNode.insertBefore(dragobj.o,dragobj.otemp)

dragobj.o.style.position&＃61;""

oDel(dragobj.otemp)

dragobj&＃61;{}

}

}

document.οnmοusemοve&＃61;function(e){

e&＃61;e||event

if(dragobj.o!&＃61;null){

dragobj.o.style.left&＃61;(e.x-dragobj.xx[0])&＃43;"px"

dragobj.o.style.top&＃61;(e.y-dragobj.xx[1])&＃43;"px"

createtmpl(e, dragobj.o) //传递当前拖动对象

}

}

function getxy(e){

var a&＃61;new Array()

var t&＃61;e.offsetTop;

var l&＃61;e.offsetLeft;

var w&＃61;e.offsetWidth;

var h&＃61;e.offsetHeight;

while(e&＃61;e.offsetParent){

t&＃43;&＃61;e.offsetTop;

l&＃43;&＃61;e.offsetLeft;

}

a[0]&＃61;t;a[1]&＃61;l;a[2]&＃61;w;a[3]&＃61;h

return a;

}

function inner(o,e){

var a&＃61;getxy(o)

if(e.x>a[1] && e.xa[0] && e.y

if(e.y

return 1;

else

return 2;

}else

return 0;

}

//将当前拖动层在拖动时可变化大小&＃xff0c;预览效果

function createtmpl(e, elm){

for(var i&＃61;0;i

if(document.getElementById("m"&＃43;i) &＃61;&＃61; null) //已经移出的层不再遍历

continue;

if($("m"&＃43;i)&＃61;&＃61;dragobj.o)

continue

var b&＃61;inner($("m"&＃43;i),e)

if(b&＃61;&＃61;0)

continue

dragobj.otemp.style.width&＃61;$("m"&＃43;i).offsetWidth

elm.style.width &＃61; $("m"&＃43;i).offsetWidth;

//1为下移&＃xff0c;2为上移

if(b&＃61;&＃61;1){

$("m"&＃43;i).parentNode.insertBefore(dragobj.otemp,$("m"&＃43;i))

}else{

if($("m"&＃43;i).nextSibling&＃61;&＃61;null){

$("m"&＃43;i).parentNode.appendChild(dragobj.otemp)

}else{

$("m"&＃43;i).parentNode.insertBefore(dragobj.otemp,$("m"&＃43;i).nextSibling)

}

}

return

}

for(var j&＃61;0;j<3;j&＃43;&＃43;){

if($("dom"&＃43;j).innerHTML.inc("div")||$("dom"&＃43;j).innerHTML.inc("DIV"))

continue

var op&＃61;getxy($("dom"&＃43;j))

if(e.x>(op[1]&＃43;10) && e.x

$("dom"&＃43;j).appendChild(dragobj.otemp)

dragobj.otemp.style.width&＃61;(op[2]-10)&＃43;"px"

}

}

}

function add_div()

{

var o&＃61;document.createElement("div")

o.className&＃61;"mo"

o.id&＃61;"m"&＃43;domid

$(&＃39;dom0&＃39;).appendChild(o)

o.innerHTML&＃61;"

o.getElementsByTagName("h1")[0].οnmοusedοwn&＃61;addevent

domid&＃43;&＃43;

}

希望本文所述对大家的Javascript程序设计有所帮助。