js画线

<body>
    <div id="main">
    </div>
    <div id="fd" style="filter:alpha(opacity=100);opacity:1;position: absolute;text-align: center; z-index:9999;  100px; height: 78px; left: 155px; top: 177px; border-right: #0099ff 1px solid; border-top: #0099ff 1px solid; border-left: #0099ff 1px solid; border-bottom: #0099ff 1px solid;">
        拖动的div
    </div>
    <script language="javascript">
   //----------------鼠标拖动-------------------
   var od = document.getElementById("fd");
    var dx,dy,mx,my,mouseD;
    var odrag;
    var isIE = document.all ? true : false;
    document.onmousedown = function(e){
        var e = e ? e : event;
        if(e.button == (document.all ? 1 : 0))
        {
            mouseD = true;
        }
    }
    document.onmouseup = function(){
        mouseD = false;
        odrag = "";
        if(isIE)
        {
            od.releaseCapture();
            od.filters.alpha.opacity = 100;
        }
        else
        {
            window.releaseEvents(od.MOUSEMOVE);
            od.style.opacity = 1;
        }
    }
    od.onmousedown = function(e){
        odrag = this;
        var e = e ? e : event;
        if(e.button == (document.all ? 1 : 0))
        {
            mx = e.clientX;
            my = e.clientY;
            od.style.left = od.offsetLeft + "px";
            od.style.top = od.offsetTop + "px";
            if(isIE)
            {
                od.setCapture();
                od.filters.alpha.opacity = 50;
            }
            else
            {
                window.captureEvents(Event.MOUSEMOVE);
                od.style.opacity = 0.5;
            }
        }
    }
    document.onmousemove = function(e){
        var e = e ? e : event;
        if(mouseD==true && odrag)
        {
            var mrx = e.clientX - mx;
            var mry = e.clientY - my;
            var result=parseInt(od.style.left) +mrx;
            od.style.left = parseInt(od.style.left) +mrx + "px";
            od.style.top = parseInt(od.style.top) + mry + "px";
            mx = e.clientX;
            my = e.clientY;

         var html="";
         var x=od.style.left;
         var y=od.style.top;
         var lineHtml=drawLine(0,0,parseInt(x),parseInt(y),"red");
         document.getElementById("main").innerHTML=lineHtml;
        }
    }

    function drawLine(x0, y0, x1, y1, color) {
        var rs = "";
        if (y0 == y1)  //画横线
        {
            if (x0 > x1) {
                var t = x0;
                x0 = x1;
                x1 = t;
            }
            rs = "<span style='top:" + y0 + ";left:" + x0 + ";position:absolute;font-size:1px;background-color:" + color + ";height:1; " + Math.abs(x1 - x0) + "'></span>";
        }
        else if (x0 == x1)  //画竖线
        {
            if (y0 > y1) {
                var t = y0;
                y0 = y1;
                y1 = t;
            }
            rs = "<span style='top:" + y0 + ";left:" + x0 + ";position:absolute;font-size:1px;background-color:" + color + ";1;height:" + Math.abs(y1 - y0) + "'></span>";
        }
        else {
            var lx = x1 - x0;
            var ly = y1 - y0;
            var l = Math.sqrt(lx * lx + ly * ly);
            rs = new Array();
            for (var i = 0; i < l; i += 1) {
                var p = i / l;
                var px = parseInt(x0 + lx * p);
                var py = parseInt(y0 + ly * p);
                rs[rs.length] = "<span style='top:" + py + ";left:" + px + ";height:1;1;position:absolute;font-size:1px;background-color:" + color + "'></span>";
            }
            rs = rs.join("");
        }
        return rs;
    }



    </script>
</body>
http://bbs.csdn.net/topics/260003609