js绘制任意位置和方向的直线

请高手帮忙一下，页面上有两个可任意拖动的层,我想在两个层之间连接一条线,随着层的拖动而拉伸改变。===================================================
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>标题栏</title>
<style type="text/css">
* {
margin:0;
padding:0;
font-size:12px;
}
p {
margin:10px 0;
}
#divtitle {
position:absolute;
left:408px;
top:170px;
width:160px;
height:35px;
background-color:#C1D8EF;
border:1px solid #000;
text-align:center;
z-index:20;
}
#divtitle2 { position:absolute;
left:508px;
top:370px;
width:160px;
height:35px;
background-color:#C1D8EF;
border:1px solid #000;
text-align:center;
z-index:20;
}
</style>
<script type="text/javascript">
var currentMoveObj = null; 
var posX;
var posY;
var zindex=-1;
function div_mousedown(id){
currentMoveObj=id;
id.style.cursor="move";
id.style.position="absolute";
posX=event.x -id.offsetLeft;
posY=event.y -id.offsetTop;
zindex=id.style.zIndex;//记录原z-index值
id.style.zIndex=10000;
}
function div_mousemove(){
if(currentMoveObj != null){
currentMoveObj.style.pixelLeft=event.x-posX;
currentMoveObj.style.pixelTop=event.y-posY;
if(currentMoveObj.style.pixelLeft<2){currentMoveObj.style.pixelLeft=2;}
if(currentMoveObj.style.pixelTop<2){currentMoveObj.style.pixelTop=2;}
if(currentMoveObj.style.pixelLeft>550){currentMoveObj.style.pixelLeft=550;}
if(currentMoveObj.style.pixelTop>350){currentMoveObj.style.pixelTop=350;}
}
}
function div_mouseup(){
currentMoveObj.style.zIndex=zindex;//恢复z-index值
zindex=-1;
currentMoveObj.style.cursor="default";
currentMoveObj=null;
}
</script>
</head>
<body>
<div id="divtitle" onmousedown="div_mousedown(this)" onmousemove="div_mousemove()" onmouseup="div_mouseup()">
  <p>标题栏1</p>
</div>
<div id="divtitle2" onmousedown="div_mousedown(this)" onmousemove="div_mousemove()" onmouseup="div_mouseup()">
  <p>标题栏2</p>
</div>
</body>
</html>

解决方案 »

  1.   

    html+js的实现我猜只有用html5的canvas标签了,在两个div底下垫一个canvas
      

  2.   

    谢谢大家，差不多可以解决了。以下是刚找到的画任意直线的方法。只要js判断两个层的位置，赋给直线一个起点和一个终点坐标就可以了。=========================================================
    <html> 
    <head> 
    <script type="text/javascript"> 
    function   mDown(){ 
        var   x0,y0; 
        x0=window.event.offsetX; 
        y0=window.event.offsetY; 
        document.fr1.x.value=x0; 
        document.fr1.y.value=y0; 
        } 
    function   mMove(){ } 
    function   mUp(){ 
        var   x1,y1,x2,y2; 
        x1=document.fr1.x.value; 
        y1=document.fr1.y.value; 
        x2=window.event.offsetX; 
        y2=window.event.offsetY; 
        //动态调用画直线函数，drawLine在下面做了定义 
        drawLine(parseInt(x1),parseInt(y1),parseInt(x2),parseInt(y2), "#0000cc ",2,0); 
    } 
    /******************   JS2D函数集     *******************     作者：neweroica         2003-3-28     CopyRight   (C)   2003     在引用或转载时请保留此版权信息，谢谢!!!     本函数集可以单独存成一个js文件： "JS2D.js " ***************************************************/ /*************   画点   ************** 
        x,y           点所在的屏幕坐标（像素） 
        color       颜色（字符串值） 
        size         大小（像素） 
    **********************************/ 
    function   drawDot(x,y,color,size){ 
        document.write( " <table   border= '0 '   cellspacing=0   cellpadding=0> <tr> <td   style= 'position:   absolute;   left:   "+(x)+ ";   top:   "+(y)+ ";background-color:   "+color+ " '   width= "+size+ "   height= "+size+ "> </td> </tr> </table> ") 
    } /*************   画直线   ************** 
        x1,y1       起点所在的屏幕坐标（像素） 
        x2,y2       终点所在的屏幕坐标（像素） 
        color       颜色（字符串值） 
        size         大小（像素） 
        style       样式 
                        =0         实线 
                        =1         虚线 
                        =2         虚实线 
    **********************************/ 
    function   drawLine(x1,y1,x2,y2,color,size,style){ 
        var   i; 
        var   r=Math.floor(Math.sqrt((x2-x1)*(x2-x1)+(y2-y1)*(y2-y1))); 
        var   theta=Math.atan((x2-x1)/(y2-y1)); 
        if(((y2-y1) <0&&(x2-x1)> 0)||((y2-y1) <0&&(x2-x1) <0)) 
            theta=Math.PI+theta; 
        var   dx=Math.sin(theta);//alert(dx) 
        var   dy=Math.cos(theta); 
        for(i=0;i <r;i++){ 
            switch(style){ 
                case   0: 
                    drawDot(x1+i*dx,y1+i*dy,color,size); 
                    break; 
                case   1: 
                    i+=size*2; 
                    drawDot(x1+i*dx,y1+i*dy,color,size); 
                    break; 
                case   2: 
                    if(Math.floor(i/4/size)%2==0){ 
                        drawDot(x1+i*dx,y1+i*dy,color,size); 
                    } 
                    else{ 
                            i+=size*2; 
                            drawDot(x1+i*dx,y1+i*dy,color,size); 
                    } 
                    break; 
                default: 
                    drawDot(x1+i*dx,y1+i*dy,color,size); 
                    break; 
            } 
        } 
    } 
    </script> </head> <body   onMouseDown= "mDown(); "   onMouseMove= "mMove(); "   onMouseUp= "mUp(); "> 
    <form     name=fr1> 
    <input   type=hidden   name=x> 
    <input   type=hidden   name=y> 
    </form> 
    </body> 
    </html>
      

  3.   

    谢谢 楼主的 画图库。
    这个我就没收了。有点倍服。竟然用table 来做象素。