为什么div与div之间的连线不能实现？

[yaoleshi]

创建div可拖动的js

// JScript File
//Modified by the CoffeeCup HTML Editor++
//http://www.coffeecup.com
// Global variables for platform branching
var isNav, isIE
if (parseInt(navigator.appVersion) >= 4) {
    if (navigator.appName == "Netscape") {
        isNav = true
    } else {
        isIE = true
    }
}

// ***Begin CSS custom API Functions***
// Set zIndex property
function setZIndex(obj, zOrder) {
    obj.zIndex = zOrder
}
// Position an object at a specific pixel coordinate
function shiftTo(obj, x, y) {
    if (isNav) {
        obj.moveTo(x,y)
    } else {
        obj.pixelLeft = x
        obj.pixelTop = y
    }
}
// ***End API Functions*** 

// Global holds reference to selected element
var selectedObj
// Globals hold location of click relative to element
var offsetX, offsetY

// Find out which element has been clicked on
function setSelectedElem(evt) {
    if (isNav) {
        // declare local var for use in upcoming loop
        var testObj
        // make copies of event coords for use in upcoming loop
        var clickX = evt.pageX
        var clickY = evt.pageY
        // loop through all layers (starting with frontmost layer)
        // to find if the event coordinates are in the layer
        for (var i = document.layers.length - 1; i >= 0; i--) {
            testObj = document.layers[i]
            if ((clickX > testObj.left) && 
                (clickX < testObj.left + testObj.clip.width) && 
                (clickY > testObj.top) && 
                (clickY < testObj.top + testObj.clip.height)) {
                    // if so, then set the global to the layer, bring it
                    // forward, and get outa here
                    selectedObj = testObj
                    setZIndex(selectedObj, 100)
                    return
            }
        }
    } else {
        // use IE event model to get the targeted element
        var imgObj = window.event.srcElement
        // make sure it's one of our planes
        if (imgObj.parentElement.id.indexOf("plane") != -1) {
            // then set the global to the style property of the element,
            // bring it forward, and say adios
            selectedObj = imgObj.parentElement.style
            setZIndex(selectedObj,100)
            return
        }
    }
    // the user probably clicked on the background
    selectedObj = null
    return
}
// Drag an element
function dragIt(evt) {
    // operate only if a plane is selected
    if (selectedObj) {
        if (isNav) {
            shiftTo(selectedObj, (evt.pageX - offsetX), (evt.pageY - offsetY))
        } else {
            shiftTo(selectedObj, (window.event.clientX - offsetX), (window.event.clientY - offsetY))
            // prevent further system response to dragging in IE
            return false
        }
    }
}
// Set globals to connect with selected element
function engage(evt) {
    setSelectedElem(evt)
    if (selectedObj) {
        // set globals that remember where the click is in relation to the
        // top left corner of the element so we can keep the element-to-cursor
        // relationship constant throughout the drag
        if (isNav) {
            offsetX = evt.pageX - selectedObj.left
            offsetY = evt.pageY - selectedObj.top
        } else {
            offsetX = window.event.offsetX
            offsetY = window.event.offsetY
        }
    }
    // block mouseDown event from forcing Mac to display
    // contextual menu.
    return false
}
// Restore elements and globals to initial values
function release(evt) {
    if (selectedObj) {
        setZIndex(selectedObj, 0)
        alert(selectedObj.left+","+selectedObj.top);
        selectedObj = null
    }
}
// Turn on event capture for Navigator
function setNavEventCapture() {
    if (isNav) {
        document.captureEvents(Event.MOUSEDOWN | Event.MOUSEMOVE | Event.MOUSEUP)
    }
}
// Assign event handlers used by both Navigator and IE (called by onLoad)
function init() {
    if (isNav) {
        setNavEventCapture()
    }
    // assign functions to each of the events (works for both Navigator and IE)
    document.onmousedown = engage
    document.onmousemove = dragIt
    document.onmouseup = release
}

[yaoleshi]

创建连线的js

// JScript File

function drawDot(x,y,color)
{
    var newObj = document.createElement("IMG");
    document.form1.appendChild(newObj);
    with(newObj)
    {
        border=0;
        style.position='absolute';
        style.pixelLeft=(x);
        style.pixelTop=(y);
        style.backgroundColor=color;
        style.pixelWidth=1;
        style.pixelHeight=1;
    }
};
function drawLine(x1,y1,x2,y2,color)
{
    if(x1==x2 && y1==y2)return;
    var w = x2-x1;
    var h = y2-y1;
    var length = Math.round(Math.sqrt(Math.pow(w,2)+Math.pow(h,2)));

    for(var i=0;i<=length;i++)
    {
        drawDot(Math.round(x1+w*i/length),Math.round(y1+h*i/length),color);

    }
    return (w>0)?(Math.asin(h/length)):(Math.PI-Math.asin(h/length));
};
function sequence(x1,y1,x2,y2,x3,y3)//从y值高到低
{
    var h1,h2,h3,temp;
    h1 = {
        x:x1,
        y:y1
    };
    h2 = {
        x:x2,
        y:y2
    };
    h3 = {
            x:x3,
            y:y3
        };
    if(h1.y>h2.y)
    {
        temp = h2;
        h2 = h1;
        h1 = temp;
    }
    if(h2.y>h3.y)
    {
        temp = h3;
        h3 = h2;
        h2 = temp;
    }
    if(h1.y>h2.y)
    {
        temp = h2;
        h2 = h1;
        h1 = temp;
    }
    
    return [h3,h2,h1];

};
function drawTriangle(x1,y1,x2,y2,x3,y3,color,fill)
{ 
    if(fill)
    {
        var data = sequence(x1,y1,x2,y2,x3,y3);
        var hx = getX(data[0].x,data[0].y,data[2].x,data[2].y,data[1].y);
        fillHorizTriangle(data[0].x,data[0].y,hx,data[1].x,data[1].y,color);
        fillHorizTriangle(data[2].x,data[2].y,hx,data[1].x,data[1].y,color);
    }
    else
    {
        drawLine(x1,y1,x2,y2,color);
        drawLine(x2,y2,x3,y3,color);
        drawLine(x3,y3,x1,y1,color);
    }
};

function getX(x1,y1,x2,y2,y)
{
    if(y1==y2)return null;
    
    var w=(x2-x1);
    var h=(y2-y1);
    
    return Math.round(x1+(y-y1)*w/h);
    
};
function fillHorizTriangle(x1,y1,x21,x22,y2,color)
{

    if(y1==y2)return null;
    var h = Math.abs(y1-y2);
    var bottom = Math.min(y1,y2);
    for(var i=0;i<=h;i++)
    {
        var x_1 = getX(x1,y1,x21,y2,bottom+i);
        var x_2 = getX(x1,y1,x22,y2,bottom+i);
        drawLine(x_1,bottom+i,x_2,bottom+i,color);
    }
};
function drawArrow(x1,y1,x2,y2,color,r,fill)
{
    var radian = drawLine(x1,y1,x2,y2,color);   
    var radianArrow1 = radian+Math.PI+0.25;
    var radianArrow2 = radian+Math.PI-0.25;
    var xa1 = x2+r*Math.cos(radianArrow1);
    var ya1 = y2+r*Math.sin(radianArrow1);
    var xa2 = x2+r*Math.cos(radianArrow2);
    var ya2 = y2+r*Math.sin(radianArrow2);
    if(fill)
    {
        drawTriangle(x2,y2,xa1,ya1,xa2,ya2,color,true);
    }
    else
    {
        drawLine(x2,y2,xa1,ya1,color);
        drawLine(x2,y2,xa2,ya2,color); 
    }
};

//drawArrow(400,400,500,100,"#000000",30,true);
//drawArrow(400,400,400,200,"#000000",30,true);
//drawArrow(400,400,300,100,"#000000",15,true);
//drawArrow(400,400,200,400,"#000000",30,true);
//drawArrow(400,400,200,600,"#000000",15,true);
//drawArrow(400,400,400,800,"#000000",30,true);
//drawArrow(400,400,700,600,"#000000",15,true);
//drawArrow(400,400,500,400,"#000000",30,true);

[yaoleshi]

如何修改上面的js才能实现拖动图片 连线也随着拖动？

现在的情况是：图片可拖动，但是线条没随着拖动。

[yaoleshi]

很急 在线等待！请高手们帮忙！