用javascript拖动div层...
时间：2010-08-18 来源：snjdju
- <html>
- <head>
- <title>用javascript拖动DIV层</title>
- <style>
- body{font-family:Verdana;font-size:11px;color:#333;}
- #win1{[position:absolute;left:100;top:100;width:200px;border:1px solid #000;}
- .title{width:100%;background:#000;color:#fff;cursor: move;}
- </style>
- </head>
- <body>
- <script>
- var move=false;
- function StartDrag(obj)
- {
- if(event.button==1&&event.srcElement.tagName.toUpperCase()=="DIV")
- {
- obj.setCapture();
- obj.style.background="#999";
- move=true;
- }
- }function Drag(obj)
- {
- if(move)
- {
- var oldwin=obj.parentNode;
- oldwin.style.left=event.clientX-100;
- oldwin.style.top=event.clientY-10;
- }
- }function StopDrag(obj)
- {
- obj.style.background="#000";
- obj.releaseCapture();
- move=false;
- }
- </script>
- <div id="win1">
- <div class="title" onMousedown="StartDrag(this)" onMouseup="StopDrag(this)" onMousemove="Drag(this)" >窗口1</div>
- This is a moveable window.<br>
- Moreinfo in
- </div>
- </body>
- </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-}
</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 || "";
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 = "";
}
else{
obj.on = "true";
obj.src = "";
}
}
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" ? "" : "";
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="" height="13" width="13" title="最小化" on="false" hspace="1" onmouseover="style.borderColor='lightblue'" style="border:solid 1px #ffffff" onmouseout="style.borderColor='#ffffff'"/><img src="" 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>
相关阅读 更多 +
