对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>

解决方案 »

  1.   

    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指 } }
    };
    //漏了"}"了
      

  2.   

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

  3.   

    注释的両行的原因
    //pWin.setCapture();
    //pWin.releaseCapture(); 
      

  4.   

    怎么回事啊,根本没有见到拖动的div之类的