可拖动，可拖拉大小的层

最新推荐文章于 2021-11-24 14:05:17 发布

原创最新推荐文章于 2021-11-24 14:05:17 发布 · 1.1k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#function #layer #ie #border #div #测试

JavaScript 专栏收录该内容

5 篇文章

订阅专栏

也是改别人的，不过加了个resize的方法，防止层被遮盖

<html>

<head>

<!--

function getMaxIndex(){ //取当前所有层的最大z-index

var s=document.getElementsByTagName("DIV");

var temp=1;

for(var i=0;i<s.length;i++)

temp=Math.max(temp,s[i].style.zIndex);

return temp;

}

function getMaxLayer(){ //取当前在最上面的层

var s=document.getElementsByTagName("DIV");

if (!s) return null;

var temp=0;

var j=0;

for(var i=0;i<s.length;i++)

if (s[i].style.zIndex>temp)

{temp=s[i].style.zIndex;j=i};

return s[j];

}

function swaplayer(layer1,layer2){ //交换两个层的顺序

var t=layer2.style.zIndex;

layer2.style.zIndex=layer1.style.zIndex;

layer1.style.zIndex=t;

}

function xx_SetTop(obj){

var maxzindexlayer=getMaxLayer();

if (maxzindexlayer) swaplayer(maxzindexlayer,obj);

}

function WhatsNavigator(){ //判断浏览器

if (window.navigator.userAgent.indexOf("MSIE")>=1){

return "IE";

}else{

if (window.navigator.userAgent.indexOf("Firefox")>=1){

return "FF";

}else{

return "ELSE";

}

function xx_OpenClose(id){

var LayerObj=document.getElementById(id);

var Nav=WhatsNavigator();

if (Nav=="IE")

var childObj=LayerObj.childNodes[1];

else{

var childObj=document.getElementById(id + "_content");

var tempobj=LayerObj.getElementsByTagName("DIV");

// var childObj=tempobj[3];

}

var LayerObjOldHeight=LayerObj.getAttribute("OLDHEIGHT");

if (LayerObjOldHeight==null){

childObj.style.display="none";

LayerObj.setAttribute("OLDHEIGHT",LayerObj.clientHeight,0);

if (Nav=="IE")

LayerObj.style.height=LayerObj.firstChild.style.height;

else

// LayerObj.style.height=tempobj[0].style.height;

LayerObj.style.height=document.getElementById(id + "_title").style.height;

}else{

childObj.style.display="";

LayerObj.style.height=LayerObj.getAttribute("OLDHEIGHT");

LayerObj.removeAttribute("OLDHEIGHT");

}

function xx_BeginMove(id, event) {

// The mouse position (in window coordinates)

// at which the drag begins

var elementToDrag=document.getElementById(id);

var startX = event.clientX, startY = event.clientY;

// xx_SetTop(elementToDrag);

// The original position (in document coordinates) of the

// element that is going to be dragged. Since elementToDrag is

// absolutely positioned, we assume that its offsetParent is the

// document body.

var origX = elementToDrag.offsetLeft, origY = elementToDrag.offsetTop;

// Even though the coordinates are computed in different

// coordinate systems, we can still compute the difference between them

// and use it in the moveHandler( ) function. This works because

// the scrollbar position never changes during the drag.

var deltaX = startX - origX, deltaY = startY - origY;

// Register the event handlers that will respond to the mousemove events

// and the mouseup event that follow this mousedown event.

if (document.addEventListener) { // DOM Level 2 event model

// Register capturing event handlers

document.addEventListener("mousemove", moveHandler, true);

document.addEventListener("mouseup", upHandler, true);

}

else if (document.attachEvent) { // IE 5+ Event Model

// In the IE event model, we capture events by calling

// setCapture( ) on the element to capture them.

elementToDrag.setCapture( );

elementToDrag.attachEvent("onmousemove", moveHandler);

elementToDrag.attachEvent("onmouseup", upHandler);

// Treat loss of mouse capture as a mouseup event.

elementToDrag.attachEvent("onlosecapture", upHandler);

}

else { // IE 4 Event Model

// In IE 4 we can't use attachEvent( ) or setCapture( ), so we set

// event handlers directly on the document object and hope that the

// mouse events we need will bubble up.

var oldmovehandler = document.onmousemove; // used by upHandler( )

var olduphandler = document.onmouseup;

document.onmousemove = moveHandler;

document.onmouseup = upHandler;

}

// We've handled this event. Don't let anybody else see it.

if (event.stopPropagation) event.stopPropagation( ); // DOM Level 2

else event.cancelBubble = true; // IE

// Now prevent any default action.

if (event.preventDefault) event.preventDefault( ); // DOM Level 2

else event.returnValue = false; // IE

/**

* This is the handler that captures mousemove events when an element

* is being dragged. It is responsible for moving the element.

**/

function moveHandler(e) {

if (!e) e = window.event; // IE Event Model

// Move the element to the current mouse position, adjusted as

// necessary by the offset of the initial mouse-click.

if ((e.clientX - deltaX)<=0)

elementToDrag.style.left = "0px";

else

elementToDrag.style.left = (e.clientX - deltaX) + "px";

if ((e.clientY - deltaY)<=0)

elementToDrag.style.top = "0px";

else

elementToDrag.style.top = (e.clientY - deltaY) + "px";

// And don't let anyone else see this event.

if (e.stopPropagation) e.stopPropagation( ); // DOM Level 2

else e.cancelBubble = true; // IE

}

/**

* This is the handler that captures the final mouseup event that

* occurs at the end of a drag.

**/

function upHandler(e) {

if (!e) e = window.event; // IE Event Model

// Unregister the capturing event handlers.

if (document.removeEventListener) { // DOM event model

document.removeEventListener("mouseup", upHandler, true);

document.removeEventListener("mousemove", moveHandler, true);

}

else if (document.detachEvent) { // IE 5+ Event Model

elementToDrag.detachEvent("onlosecapture", upHandler);

elementToDrag.detachEvent("onmouseup", upHandler);

elementToDrag.detachEvent("onmousemove", moveHandler);

elementToDrag.releaseCapture( );

}

else { // IE 4 Event Model

// Restore the original handlers, if any

document.onmouseup = olduphandler;

document.onmousemove = oldmovehandler;

}

// And don't let the event propagate any further.

if (e.stopPropagation) e.stopPropagation( ); // DOM Level 2

else e.cancelBubble = true; // IE

}

function xx_Resize(id, event) {

var elementToDrag=document.getElementById(id);

var startX = event.clientX, startY = event.clientY;

var origX = elementToDrag.offsetLeft, origY = elementToDrag.offsetTop;

var deltaX = startX - origX, deltaY = startY - origY;

if (document.addEventListener) { // DOM Level 2 event model

// Register capturing event handlers

document.addEventListener("mousemove", moveHandler, true);

document.addEventListener("mouseup", upHandler, true);

}

else if (document.attachEvent) { // IE 5+ Event Model

// In the IE event model, we capture events by calling

// setCapture( ) on the element to capture them.

elementToDrag.setCapture( );

elementToDrag.attachEvent("onmousemove", moveHandler);

elementToDrag.attachEvent("onmouseup", upHandler);

// Treat loss of mouse capture as a mouseup event.

elementToDrag.attachEvent("onlosecapture", upHandler);

}

else { // IE 4 Event Model

// In IE 4 we can't use attachEvent( ) or setCapture( ), so we set

// event handlers directly on the document object and hope that the

// mouse events we need will bubble up.

var oldmovehandler = document.onmousemove; // used by upHandler( )

var olduphandler = document.onmouseup;

document.onmousemove = moveHandler;

document.onmouseup = upHandler;

}

// We've handled this event. Don't let anybody else see it.

if (event.stopPropagation) event.stopPropagation( ); // DOM Level 2

else event.cancelBubble = true; // IE

// Now prevent any default action.

if (event.preventDefault) event.preventDefault( ); // DOM Level 2

else event.returnValue = false; // IE

/**

* This is the handler that captures mousemove events when an element

* is being dragged. It is responsible for moving the element.

**/

function moveHandler(e) {

if (!e) e = window.event; // IE Event Model

// Move the element to the current mouse position, adjusted as

// necessary by the offset of the initial mouse-click.

/* if ((e.clientX - deltaX)<=0)

elementToDrag.style.left = "0px";

else

elementToDrag.style.left = (e.clientX - deltaX) + "px";

if ((e.clientY - deltaY)<=0)

elementToDrag.style.top = "0px";

else

elementToDrag.style.top = (e.clientY - deltaY) + "px";*/

if ((e.clientX - origX)<=40)

elementToDrag.style.width= "40px";

else

elementToDrag.style.width= (e.clientX - origX) + "px";

if ((e.clientY - origY)<=40)

elementToDrag.style.height = "40px";

else

elementToDrag.style.height= (e.clientY - origY) + "px";

// And don't let anyone else see this event.

if (e.stopPropagation) e.stopPropagation( ); // DOM Level 2

else e.cancelBubble = true; // IE

}

/**

* This is the handler that captures the final mouseup event that

* occurs at the end of a drag.

**/

function upHandler(e) {

if (!e) e = window.event; // IE Event Model

// Unregister the capturing event handlers.

if (document.removeEventListener) { // DOM event model

document.removeEventListener("mouseup", upHandler, true);

document.removeEventListener("mousemove", moveHandler, true);

}

else if (document.detachEvent) { // IE 5+ Event Model

elementToDrag.detachEvent("onlosecapture", upHandler);

elementToDrag.detachEvent("onmouseup", upHandler);

elementToDrag.detachEvent("onmousemove", moveHandler);

elementToDrag.releaseCapture( );

}

else { // IE 4 Event Model

// Restore the original handlers, if any

document.onmouseup = olduphandler;

document.onmousemove = oldmovehandler;

}

// And don't let the event propagate any further.

if (e.stopPropagation) e.stopPropagation( ); // DOM Level 2

else e.cancelBubble = true; // IE

}

function xx_Layer(id,title,width,height,left,top,content){

this.id=id;

this.title=title;

this.style="BORDER: #f0f0f0 3px outset;FONT-SIZE: 12px;BACKGROUND-COLOR: #d4d0c8;";

this.left=left;

this.titlestyle="font-size:13px; background-color: #0A246A; color: #FFFFFF;height:24px;line-height:24px;padding-left:5px;";

this.top=top;

this.width=width;

this.height=height;

this.zIndex=getMaxIndex()+1;

this.innerHTML=content;

// this.resizeable=false;

if (content) this.draw();

}

xx_Layer.prototype.HTML=function(head,content){

var me=document.getElementById(this.id);

if (head){

var me_head=document.getElementById(this.id + "_title");

me_head.innerHTML="<table width="100%" border="0"><tr><td width="99%" style="color:#ffffff;font-size:12px;"><div onMouseDown="xx_BeginMove('" + this.id + "',event);" style="FLOAT: left; OVERFLOW: hidden; WIDTH: 88%; CURSOR: move; TEXT-ALIGN: left;"> " + head + "</div></td><td width="1%" onclick="xx_OpenClose('" + this.id + "');"><span style="color:#ffffff;font-size:12px;cursor:pointer;">□</span></td></tr></table>";

}

if (content){

var me_content=document.getElementById(this.id + "_content");

me_content.childNodes[0].childNodes[0].childNodes[0].childNodes[0].innerHTML=content;

}

xx_Layer.prototype.draw=function(){

var xlayer=document.getElementById(this.id);

if (xlayer){alert("相同ID的层已经存在，放弃新建！");return false;}

var xlayer=document.createElement("DIV");

xlayer.setAttribute("id",this.id);

xlayer.style.cssText=this.style + "width:" + this.width + ";height:" + this.height + ";left:" + this.left + ";top:" + this.top + ";z-index:" + this.zIndex + ";position:absolute;";

xlayer.onclick=function(){xx_SetTop(xlayer);}

document.body.appendChild(xlayer);

var xlayer_title=document.createElement("DIV");

xlayer_title.style.cssText=this.titlestyle;

xlayer_title.setAttribute("id",this.id+"_title");

xlayer_title.innerHTML="<table width="100%" border="0"><tr><td width="99%" style="color:#ffffff;font-size:12px;"><div onMouseDown="xx_BeginMove('" + this.id + "',event);" style="FLOAT: left; OVERFLOW: hidden; WIDTH: 88%; CURSOR: move; TEXT-ALIGN: left;"> " + this.title + "</div></td><td width="1%" onclick="xx_OpenClose('" + this.id + "');"><span style="color:#ffffff;font-size:12px;cursor:pointer;">□</span></td></tr></table>";

xlayer.appendChild(xlayer_title);

var xlayer_child=document.createElement("Table");

xlayer_child.setAttribute("width","100%");

xlayer_child.setAttribute("height","100%");

xlayer_child.setAttribute("id",this.id+"_content");

xlayer.appendChild(xlayer_child);

var newRow=xlayer_child.insertRow(0);

var c0=newRow.insertCell(0);

c0.setAttribute("align","left");

c0.setAttribute("valign","top");

var t="<div style="width:100%;height:";

var Nav=WhatsNavigator();