适合各种浏览器的拖动层

 
Js/Css/jQuery

类似于许愿墙的东东。可以同时展现多个层，任意拖动~

调用方法：

var dialog1 = new Dialog("偶来试试",null,'<img src="" width="300" height="200"/>');
document.write(dialog1);
dialog1.BindEvent();
dialog1.SetIndex(2);
dialog1.SetRect(350,100,250);

[html]<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<meta content="text/html;charset=gb2312" http-equiv="content-type">
<style>
*{font-size:9pt;font-family:宋体;line-height:130%;}
</style>
</HEAD>
<BODY>
<SCRIPT LANGUAGE="JavaScript">
<!--
Global = new Object();
Global.__UniqueID = 0;
Global.GetUniqueID = function(){ return "__MT_UID_" Global.__UniqueID ;};
function Dialog(title,icon,body){
this.Icon = icon || "http://www.jsgod.net/test/images/window_blur.gif";
this.Title = title || "Untitled Document";
this.Body = body || "Blank Document";
this.UniqueID = Global.GetUniqueID();
//////////////////////////////////////
this.Width = 400;
this._mousedown = false;
this._offsetX = 0;
this._offsetY = 0;
this._x = 0;
this._y = 0;
var i,l;
//////////////////////////////////////
this.SetRect = function(_width,_top,_left){
var obj;
if(_width > 200) this.Width = _width;
this._x = _left;
this._y = _top;
obj = document.getElementById(this.UniqueID);
if(obj){
obj.style.width = this.Width;
obj.style.top = _top;
obj.style.left = _left;
}
}
this.SetIndex = function(index){
if(isNaN(index)) return;
var obj = document.getElementById(this.UniqueID);
if(obj) obj.style.zIndex = index;
}
this.BindEvent = function(){
var self = this,obj = null;
var table = document.getElementById(this.UniqueID);
if((null == table)||(table.tagName != "TABLE")) return;
if(table.rows&&table.rows[0].cells&&table.rows[0].cells[0]&&table.rows[0].cells[0].firstChild){
obj = table.rows[0].cells[0].firstChild;
obj.rows[0].cells[2].lastChild.onclick = function(e){
var obj = document.getElementById(self.UniqueID);
if(obj) obj.parentNode.removeChild(obj);
}
obj.rows[0].cells[2].firstChild.onclick = function(e){
e = window.event || e;
var obj = document.getElementById(self.UniqueID);
if(obj&&obj.rows&&obj.rows.length){
with(obj.rows[1].style){
display = display == "" ? "none" : "";
}
}
obj = (e.target || e.srcElement);
if(obj.on == "true"){
obj.on = "false";
obj.src = "http://www.jsgod.net/test/images/min.gif";
}
else{
obj.on = "true";
obj.src = "http://www.jsgod.net/test/images/max.gif";
}
}
if(obj.rows&&obj.rows[0].cells&&obj.rows[0].cells[0].firstChild) obj = obj.rows[0].cells[0].firstChild;
obj.onmousedown = function(e){
e = window.event || e;
if(e.cancelBubble) e.cancelBubble();
//Firefox....
};
obj.ondblclick = function(){ self.Close();};
table.onmousedown = function(){
var obj;
if(Dialog.ObjectRef&&(this != Dialog.ObjectRef)){
obj = document.getElementById(Dialog.ObjectRef.UniqueID);
if(obj){
obj.style.borderColor = "#cccccc";
obj.style.zIndex = 90;
obj.rows[0].cells[0].firstChild.rows[0].cells[0].firstChild.src = "images/window_blur.gif";
}
}
obj = document.getElementById(self.UniqueID);
if(obj){
obj.style.borderColor = "lightblue";
obj.style.zIndex = 99;
obj.rows[0].cells[0].firstChild.rows[0].cells[0].firstChild.src = "images/window.gif";
}
Dialog.ObjectRef = self;
}
}
if(table.rows){
table.rows[0].cells[0].firstChild.rows[0].cells[1].onmousedown = function(e){
var obj;
e = window.event || e;
self._dragable = true;
obj = document.getElementById(self.UniqueID);
if(null == obj) return;
self._x = e.clientX;
self._y = e.clientY;
self._offsetX = parseInt(obj.style.left);
self._offsetY = parseInt(obj.style.top);
}
table.onmouseover = function(e){
e = window.event || e;
var obj = document.getElementById(self.UniqueID);
if(obj) obj.style.cursor = "default";

};
table.onmouseup = function(e){
var obj;
e = window.event || e;
self._dragable = false;
obj = document.getElementById(self.UniqueID);
if(obj) obj.style.cursor = "default";
}
table.rows[0].ondblclick = function(e){
obj = document.getElementById(self.UniqueID);
if(null == obj) return;
if(obj.rows&&(obj.rows.length > 1)){
with(obj.rows[1].style){
display = display == "" ? "none" : "";
obj = obj.rows[0].cells[0].firstChild.rows[0].cells[2].firstChild;
obj.src = obj.on == "true" ? "http://www.jsgod.net/test/images/min.gif" : "http://www.jsgod.net/test/images/max.gif";
obj.on = obj.on == "true" ? "false" : "true";
};
}
}
}
}
this.Close = function(){
var table = document.getElementById(this.UniqueID);
if(table) table.parentNode.removeChild(table);
}
this.toString = function(){
var shtml = '';
shtml = '<table cellpadding="0" cellspacing="0" border="1" onselectstart="return false;" oncontextmenu="return false;" ondragstart="return false;" bgcolor="#ffffff" id="' this.UniqueID '" style="border:solid 1px #cccccc;cursor:default;width:' (this.Width) 'px;position:absolute;top:' this._y 'px;left:' this._x 'px;">';
shtml = '<tr height="20"><td style="border:0px;"><table cellpadding="5" cellspacing="0" border="0" width="100%"><tr><td width="20"><img src="' this.Icon '" width="16" height="16"/></td><td align="left"><span style="width:200px;overflow:hidden;" title="' this.Title '">' this.Title '</span></td><td width="32"><img src="http://www.jsgod.net/test/images/min.gif" height="13" width="13" title="最小化" on="false" hspace="1" onmouseover="style.borderColor=\'lightblue\'" style="border:solid 1px #ffffff" onmouseout="style.borderColor=\'#ffffff\'"/><img src="http://www.jsgod.net/test/images/close.gif" width="13" height="13" title="关闭" style="border:solid 1px #ffffff;" onmouseover="style.borderColor=\'lightblue\'" onmouseout="style.borderColor=\'#ffffff\'"/></td></tr>';
shtml = '</table></td></tr>';
shtml = '<tr style="display:;"><td style="border:0px;padding:5px;border-top:solid 1px #cccccc;" valign="top">' this.Body '</td></tr>';
shtml = '</table>';
return shtml;
}
}
document.onmousemove = function(e){
var _x,_y,obj;
e = window.event || e;
if(null == Dialog.ObjectRef) return;
obj = document.getElementById(Dialog.ObjectRef.UniqueID);
if(null == obj) return;
if(Dialog.ObjectRef._dragable){
obj.style.top = Dialog.ObjectRef._offsetY e.clientY - Dialog.ObjectRef._y;
obj.style.left = Dialog.ObjectRef._offsetX e.clientX - Dialog.ObjectRef._x;
obj.style.cursor = "move";
}
}
Dialog.ObjectRef = null;
var dialog = new Dialog("哇哈哈",null,"Matrixy Herry");
document.write(dialog);
dialog.BindEvent();
dialog.SetIndex(1);
dialog.SetRect(400,100,200);
var dialog1 = new Dialog("偶来试试",null,'<img src="" width="300" height="200"/>');
document.write(dialog1);
dialog1.BindEvent();
dialog1.SetIndex(2);
dialog1.SetRect(350,100,250);
var dialog2 = new Dialog("Hello World");
document.write(dialog2);
dialog2.BindEvent();
dialog2.SetIndex(24);
dialog2.SetRect(380,10,20);
var dialog3 = new Dialog("4");
document.write(dialog3);
dialog3.BindEvent();
dialog3.SetRect(390,200,100);
var dialog4 = new Dialog("5");
document.write(dialog4);
dialog4.SetIndex(340);
dialog4.BindEvent();
//-->
</SCRIPT>
</BODY>
</HTML>[/html]

有话要说