用js做一个web版的连线题，求大神降临

假如在web页面上有两个表格，分别为tab1、tab2，tab1里面有字段a、b、c 三个字段，tab2里面有C、B、A 三个字段。现在想用线条把它们对应的大小写连接起来（可以用按钮触发，也可以直接连）。要求用js实现，svg/vml的，需要考虑跨浏览器！【求源码，或者有个demo】

解决方案 »

  1.   

    这个可以 canvas，flash VML 来做， js动态生成很多点来画线，效率低。
    写了个js生成div的，楼主参考下<!DOCTYPE HTML>
    <html>
    <head>
    <meta charset="gb2312" />
    <title></title>
    <style>
    .point {
    position:absolute;
    width:1px; height:1px; overflow:hidden;
    background:#000;
    }
    .col {
    position:absolute; left:300px; top:100px;
    font-size:20px; font-weight:bold; text-align:center;
    }
    .right {
    left:500px;
    }
    p {
    width:20px;
    border:1px solid red;
    }
    </style>
    </head>
    <body>
    <div class="col">
    <p>a</p>
    <p>c</p>
    <p>b</p>
    </div>
    <div class="col right">
    <p>B</p>
    <p>A</p>
    <p>C</p>
    </div>
    <script>
    var x = [];
    var y = [];
    document.onclick = function(e){
    e = window.event || e;
    var tx = e.clientX;
    var ty = e.clientY;
    x.push(tx);
    y.push(ty);
    //console.log( x );
    //console.log( y );
    if( x.length == 2 && y.length == 2 ){
    createLine(x[0], y[0], x[1], y[1]);
    x.length = 0;
    y.length = 0;
    }
    }
    function point(x, y){
    var div = document.createElement('div');
    div.style.left = x + 'px';
    div.style.top = y + 'px';
    div.className = 'point';
    document.body.appendChild(div);
    }

    function createLine(x1,y1,x2,y2){
    var tmp, x, y;
    if(x1 >= x2){
    tmp = x1;
    x1 = x2;
    x2 = tmp;
    tmp = y1;
    y1 = y2;
    y2 = tmp;        
    }
    for(var i = x1 ; i < x2; i++){
    x = i;
    y = (y2 - y1)/(x2 - x1)*(x - x1)+y1;
    point(x,y);
    }
    }  
    </script>
    </body>
    </html>
      

  2.   

    @calmcrime   谢谢支持！能帮在实现一下整体在页面上拖动的效果么？
      

  3.   

    楼主如果纯粹要代码的话，猪八戒网枪手多得很如果学习的话，为什么不试着自己写下呢？ 百度 google  那么强大，，，有什么问题 再贴上来，大家帮你。