对js中的面向对象还不是很了解,突然想写一个能拖动的div类,但是在拖动的时候出现问题了,俺找了半天没找到原因,贴上来,大虾们帮我看看,代码如下
<html>
<head>
<title>测试类</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
</head><body><SCRIPT LANGUAGE="JavaScript">
<!--
function Panel(width,height,left,top,title,innerH){
var pWin = document.createElement("div");
pWin.style.position = "absolute";
pWin.style.width = width;
pWin.style.height = height;
pWin.style.top = top;
pWin.style.left = left;
pWin.style.border = "2px solid gray";
document.body.appendChild(pWin); var pContent = null;
var pTable = document.createElement("table");
pTable.style.width = "100%";
pTable.style.height = "100%";
pTable.border = "0";
pTable.cellPadding = "0px";
pTable.cellSpacing = "0px"; var tr1 = pTable.insertRow(0);
tr1.style.backgroundColor = "#808080";
tr1.style.height = "22px";
tr1.onselectstart = function(){return false;};
var td1 = tr1.insertCell(0);
td1.style.textAlign = "left";
td1.style.width = (pWin.offsetWidth-30) + "px";
td1.style.font = "bold 12px \"lucida Grande\",Verdana";
td1.style.color = "white";
td1.style.cursor = "move";
td1.innerText = title;
var x0=0,y0=0,x1=0,y1=0;
var moveable = false; td1.onmousedown = function(){
if(event.button==1){
pWin.setCapture();
x0 = event.clientX;
y0 = event.clientY;
x1 = parseInt(pWin.offsetLeft);
y1 = parseInt(pWin.offsetTop);
moveable = true;
//alert(moveable); //此处alert如果不注释就可以执行,但是如果没有alert好像moveable没有被赋成true指 }
};
td1.onmouseup = function(){
if(moveable){
pWin.releaseCapture();
moveable = false;
}
};
td1.onmousemove = function(){
if(moveable){
pWin.style.left = x1 + event.clientX - x0;
pWin.style.top = y1 + event.clientY - y0;
}
}; var td2 = tr1.insertCell(1);
td2.style.textAlign = "right";
td2.onclick = function(){pWin.removeNode(true)};
td2.style.font = "bold 18px \"lucida Grande\"";
td2.style.color = "red";
td2.style.cursor = "pointer";
td2.style.textAlign = "center";
td2.vAlign = "middle";
td2.innerText = "×";
td2.title = "关闭";
var tr2 = pTable.insertRow(1);
pContent = tr2.insertCell(0);
pContent.colSpan = "2";
pContent.innerHTML = innerH;
pContent.style.backgroundColor = "white";
pContent.align = "left";
pContent.vAlign = "top";
pWin.appendChild(pTable);
Panel.prototype.close = function(){
pWin.removeNode(true);
}
/*
//开始拖动;
function startDrag(e){
if(e.button==1){
pWin.setCapture();
x0 = e.clientX;
y0 = e.clientY;
x1 = parseInt(pWin.offsetLeft);
y1 = parseInt(pWin.offsetTop);
moveable = true;
//alert(moveable)
}
}
//拖动;
function drag(e){
if(moveable){
pWin.style.left = x1 + e.clientX - x0;
pWin.style.top = y1 + e.clientY - y0;
}
}
//停止拖动;
function stopDrag(e){
//alert(3)
if(moveable){
pWin.releaseCapture();
moveable = false;
}
} */
}var p1 = new Panel("300px","200px","600px","200px","测试窗口","<button id='buton'>测试</button>");
var p2 = new Panel("300px","200px","100px","100px","测试窗口","<button>测试</button>");
//-->
</SCRIPT>
</body>
</html>
<html>
<head>
<title>测试类</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
</head><body><SCRIPT LANGUAGE="JavaScript">
<!--
function Panel(width,height,left,top,title,innerH){
var pWin = document.createElement("div");
pWin.style.position = "absolute";
pWin.style.width = width;
pWin.style.height = height;
pWin.style.top = top;
pWin.style.left = left;
pWin.style.border = "2px solid gray";
document.body.appendChild(pWin); var pContent = null;
var pTable = document.createElement("table");
pTable.style.width = "100%";
pTable.style.height = "100%";
pTable.border = "0";
pTable.cellPadding = "0px";
pTable.cellSpacing = "0px"; var tr1 = pTable.insertRow(0);
tr1.style.backgroundColor = "#808080";
tr1.style.height = "22px";
tr1.onselectstart = function(){return false;};
var td1 = tr1.insertCell(0);
td1.style.textAlign = "left";
td1.style.width = (pWin.offsetWidth-30) + "px";
td1.style.font = "bold 12px \"lucida Grande\",Verdana";
td1.style.color = "white";
td1.style.cursor = "move";
td1.innerText = title;
var x0=0,y0=0,x1=0,y1=0;
var moveable = false; td1.onmousedown = function(){
if(event.button==1){
pWin.setCapture();
x0 = event.clientX;
y0 = event.clientY;
x1 = parseInt(pWin.offsetLeft);
y1 = parseInt(pWin.offsetTop);
moveable = true;
//alert(moveable); //此处alert如果不注释就可以执行,但是如果没有alert好像moveable没有被赋成true指 }
};
td1.onmouseup = function(){
if(moveable){
pWin.releaseCapture();
moveable = false;
}
};
td1.onmousemove = function(){
if(moveable){
pWin.style.left = x1 + event.clientX - x0;
pWin.style.top = y1 + event.clientY - y0;
}
}; var td2 = tr1.insertCell(1);
td2.style.textAlign = "right";
td2.onclick = function(){pWin.removeNode(true)};
td2.style.font = "bold 18px \"lucida Grande\"";
td2.style.color = "red";
td2.style.cursor = "pointer";
td2.style.textAlign = "center";
td2.vAlign = "middle";
td2.innerText = "×";
td2.title = "关闭";
var tr2 = pTable.insertRow(1);
pContent = tr2.insertCell(0);
pContent.colSpan = "2";
pContent.innerHTML = innerH;
pContent.style.backgroundColor = "white";
pContent.align = "left";
pContent.vAlign = "top";
pWin.appendChild(pTable);
Panel.prototype.close = function(){
pWin.removeNode(true);
}
/*
//开始拖动;
function startDrag(e){
if(e.button==1){
pWin.setCapture();
x0 = e.clientX;
y0 = e.clientY;
x1 = parseInt(pWin.offsetLeft);
y1 = parseInt(pWin.offsetTop);
moveable = true;
//alert(moveable)
}
}
//拖动;
function drag(e){
if(moveable){
pWin.style.left = x1 + e.clientX - x0;
pWin.style.top = y1 + e.clientY - y0;
}
}
//停止拖动;
function stopDrag(e){
//alert(3)
if(moveable){
pWin.releaseCapture();
moveable = false;
}
} */
}var p1 = new Panel("300px","200px","600px","200px","测试窗口","<button id='buton'>测试</button>");
var p2 = new Panel("300px","200px","100px","100px","测试窗口","<button>测试</button>");
//-->
</SCRIPT>
</body>
</html>
if(event.button==1){
pWin.setCapture();
x0 = event.clientX;
y0 = event.clientY;
x1 = parseInt(pWin.offsetLeft);
y1 = parseInt(pWin.offsetTop);
moveable = true;
//alert(moveable); //此处alert如果不注释就可以执行,但是如果没有alert好像moveable没有被赋成true指 } }
};
//漏了"}"了
if(event.button==1){
//pWin.setCapture();
x0 = event.clientX;
y0 = event.clientY;
x1 = parseInt(pWin.offsetLeft);
y1 = parseInt(pWin.offsetTop);
moveable = true;
//alert(moveable); //此处alert如果不注释就可以执行,但是如果没有alert好像moveable没有被赋成true指 }
}
};
td1.onmouseup = function(){
if(moveable){
//pWin.releaseCapture();
moveable = false;
}
};
//pWin.setCapture();
//pWin.releaseCapture();