散分100，急求。

方框可以拖拽方框放到div里 拖div

解决方案 »

  1.   

    熟悉web2.0，blog，ajax，rss，.net2005等请进入
    http://blog.csdn.net/datehr/category/198305.aspx
      

  2.   

    你的意思就是有一条线总是连着两个DIV...
    这个...总是探测DIV位置...然后Javascript 画线
      

  3.   

    <html xmlns:v="urn:schemas-microsoft-com:vml">
    <style>
     v\:* { 
    behavior: url(#default#VML);
    position:absolute;
    z-index:1000;
    }
    #box1,#box2{
    border:1px solid #000;
    width:40px;
    height:40px;
    position:absolute;
    z-index:0;
    }
    #box1{
    background:#69c;
    }
    #box2{
    background:red;
    }
    body{
    margin:0;
    }
    </style>
    <body>
    <v:line id="line" from="0,0" to="100,100" strokecolor="black"></v:line>
    <div id="box1"></div>
    <div id="box2"></div>
    <script language="javascript">
    <!--
    var $ = document.getElementById;
    window.onload=function(){
    $('box1').style.left=Math.random()*800+"px";
    $('box1').style.top =Math.random()*600+"px";
    $('box2').style.left=Math.random()*800+"px";
    $('box2').style.top =Math.random()*600+"px";
    joinBox();
    }
    function joinBox(){
    var x1 = parseInt($('box1').style.left) + ($('box1').offsetWidth/2);
    var y1 = parseInt($('box1').style.top) + ($('box1').offsetHeight/2);
    var x2 = parseInt($('box2').style.left) + ($('box2').offsetWidth/2);
    var y2 = parseInt($('box2').style.top) + ($('box2').offsetHeight/2);
    $('line').from=x1+","+y1;
    $('line').to  =x2+","+y2;
    }function mouseEvent(){
    this.onmousedown=function(){
    this.drag=true;
    this.setCapture();
    this.mx = event.offsetX;
    this.my = event.offsetY;
    }
    this.onmousemove=function(){
    if( this.drag )
    {
    this.style.left = event.clientX - this.mx;
    this.style.top = event.clientY - this.my;
    joinBox();
    }
    }
    this.onmouseup =function(){
    this.drag = false;
    this.releaseCapture();
    }
    }mouseEvent.call($('box1'));
    mouseEvent.call($('box2'));
    //-->
    </script>
    </body>
    </html>
      

  4.   

    加事件可以这样/* 这里写事件 */
    $('line').onclick=function(){
    alert('别点我!');
    }
      

  5.   

    楼上大哥，留个QQ号或者MSN什么的
      

  6.   

    <html xmlns:v="urn:schemas-microsoft-com:vml">
    <style>
     v\:* { 
    behavior: url(#default#VML);
    position:absolute;
    z-index:1000;
    }
    #box1,#box2{
    border:1px solid #000;
    width:40px;
    height:40px;
    position:absolute;
    z-index:0;
    }
    #box1{
    background:#69c;
    left:100px;
    top:100px;
    }
    #box2{
    background:red;
    left:600px;
    top:100px;
    }
    body{
    margin:0;
    }
    </style>
    <body>
    <v:line id="line" from="0,0" to="10,10" strokecolor="black" style="visibility:hidden"><v:stroke EndArrow="Classic"/></v:line>
    <div id="box1"></div>
    <div id="box2"></div>
    <script language="javascript">
    <!--
    var $ = document.getElementById;
    function joinBox(){
    var x1 = parseInt($('box1').style.left) + ($('box1').offsetWidth/2);
    var y1 = parseInt($('box1').style.top) + ($('box1').offsetHeight/2);
    var x2 = parseInt($('box2').style.left) + ($('box2').offsetWidth/2);
    var y2 = parseInt($('box2').style.top) + ($('box2').offsetHeight/2);
    $('line').from=x1+","+y1;
    $('line').to  =x2+","+y2;
    }function mouseEvent(){
    this.onmousedown=function(){
    this.drag=true;
    this.box = this==$('box1')?$('box2'):$('box1');
    this.setCapture();
    var x1 = parseInt(this.currentStyle.left) + (this.offsetWidth/2);
    var y1 = parseInt(this.currentStyle.top) + (this.offsetHeight/2);
    $('line').from = x1+","+y1;
    $('line').to   = x1+","+y1;
    $('line').style.visibility="visible";
    }
    this.onmousemove=function(){
    if( this.drag )
    {
    $('line').to  = event.clientX+","+event.clientY;
    }
    }
    this.onmouseup =function(){
    this.drag = false;
    this.releaseCapture();
    if( event.clientX > parseInt(this.box.currentStyle.left) &&
    event.clientX < parseInt(this.box.currentStyle.left) + this.box.offsetWidth &&
    event.clientY > parseInt(this.box.currentStyle.top) &&
    event.clientY < parseInt(this.box.currentStyle.top) + this.box.offsetHeight )
    {
    var x2 = parseInt(this.box.currentStyle.left) + (this.box.offsetWidth/2);
    var y2 = parseInt(this.box.currentStyle.top) + (this.box.offsetHeight/2);
    $('line').to = x2 + "," + y2;
    }
    else
    $('line').style.visibility = "hidden";
    }
    }
    mouseEvent.call($('box1'));
    mouseEvent.call($('box2'));
    //-->
    </script>
    </body>
    </html>
      

  7.   

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"><html xmlns:v = "urn:schemas-microsoft-com:vml"><head><STYLE>
     v\:* { BEHAVIOR: url(#default#VML) }
    </STYLE>
    <SCRIPT LANGUAGE="JavaScript">
    <!--
    var currentMoveObj = null;    //当前拖动对象
    var relLeft;    //鼠标按下位置相对对象位置
    var relTop;
    var tables_array=[];//表对象集合
    var lines_array=[];//线条集合
    var tables_lines=[];//表和线的关系function init(flag)
    {
      if(flag==0)//两个表一条线的简单情况
       {
       tables_array=["tb1","tb2"];
       lines_array=["line1"];
       tables_lines[0]=[lines_array[0],tables_array[0],tables_array[1]];//line1 From tb1 to tb2
       document.getElementById("tb3").style.display="none";
       document.getElementById("tb4").style.display="none";
       document.getElementById("line2").style.display="none";
       document.getElementById("line3").style.display="none";
       document.getElementById("line4").style.display="none";
       }
       else
       {
       tables_array=["tb1","tb2","tb3","tb4"];
       lines_array=["line1","line2","line3","line4"];
       tables_lines[0]=[lines_array[0],tables_array[0],tables_array[1]];//line1 From tb1 to tb2
       tables_lines[1]=[lines_array[1],tables_array[1],tables_array[2]];//line2 From tb2 to tb3
       tables_lines[2]=[lines_array[2],tables_array[0],tables_array[2]];//From, to
       tables_lines[3]=[lines_array[3],tables_array[2],tables_array[3]];//From, to
       }
    }
    function f_mdown(obj)
    {
        currentMoveObj = obj;        //当对象被按下时，记录该对象
        currentMoveObj.style.position = "absolute";
        relLeft = event.x - currentMoveObj.style.pixelLeft;
        relTop = event.y - currentMoveObj.style.pixelTop;}
    window.document.onmouseup = function()
    {
        currentMoveObj = null;    //当鼠标释放时同时释放拖动对象}
    function line_move(obj)
    {
             
           if (tables_lines.length>0)
           {
             for(var i=0;i<tables_lines.length;i++)
               {
                  if(tables_lines[i][1]==obj.id)
                     document.getElementById(tables_lines[i][0]).from=event.x+","+event.y;
                  else if(tables_lines[i][2]==obj.id)
                     document.getElementById(tables_lines[i][0]).to=event.x+","+event.y;
               }
           }  
             }
    function f_move(obj)
    {
        if(currentMoveObj != null) 
        {  
             line_move(obj);        
            currentMoveObj.style.pixelLeft=event.x-relLeft;
            currentMoveObj.style.pixelTop=event.y-relTop;
        }
    }//-->
    </SCRIPT>
    </head>
    <BODY onload="init(1)">
    <v:line id="line1" style="position:absolute" from = "0,0" to = "400,0" strokecolor = "red"  >
    <v:stroke endarrow = "oval" StartArrow = "oval"></v:stroke></v:line>
    <v:line id="line2" style="position:absolute" from = "400,0" to = "400,300" strokecolor = "red"  >
    <v:stroke endarrow = "oval" StartArrow = "oval"></v:stroke></v:line>
    <v:line id="line3" style="position:absolute" from = "0,0" to = "400,300" strokecolor = "red"  >
    <v:stroke endarrow = "oval" StartArrow = "oval"></v:stroke></v:line>
    <v:line id="line4" style="position:absolute" from = "400,300" to = "600,300" strokecolor = "red"  >
    <v:stroke endarrow = "oval" StartArrow = "oval"></v:stroke></v:line>
    <TABLE id="tb1" width="100" border=1 onselectstart="return false" style="position:absolute;left:0;top:0" onmousedown="f_mdown(this)" onmousemove="f_move(this)">
    <TR>
        <TD bgcolor="#CCCCCC" align="center"height="20" style="cursor:move">title1</TD>
    </TR>
    <TR>
        <TD align="center" height="60">content</TD>
    </TR>
    </TABLE>
    <TABLE id="tb2" width="100" border=1 onselectstart="return false" style="position:absolute;left:350;top:0" onmousedown="f_mdown(this)" onmousemove="f_move(this)">
    <TR>
        <TD bgcolor="#CCCCCC" align="center" height="20" style="cursor:move">title2</TD>
    </TR>
    <TR>
        <TD align="center" height="60">content</TD>
    </TR>
    </TABLE>
    <TABLE id="tb3" width="100" border=1 onselectstart="return false" style="position:absolute;left:350;top:250" onmousedown="f_mdown(this)" onmousemove="f_move(this)">
    <TR>
        <TD bgcolor="#CCCCCC" align="center" height="20" style="cursor:move">title3</TD>
    </TR>
    <TR>
        <TD align="center" height="60">content</TD>
    </TR>
    </TABLE>
    <TABLE id="tb4" width="100" border=1 onselectstart="return false" style="position:absolute;left:600;top:250" onmousedown="f_mdown(this)" onmousemove="f_move(this)">
    <TR>
        <TD bgcolor="#CCCCCC" align="center" height="20" style="cursor:move">title4</TD>
    </TR>
    <TR>
        <TD align="center" height="60">content</TD>
    </TR>
    </TABLE>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br></BODY>