稀有js消除连线问题？？？？？？？？？？？？？？？（来着有分，少了再加；提供有效帮助者高分！）

如图：拖动图片时，连线重新创建现在需要把原来的旧连线擦除掉.
该如何实现？
求各位帮帮忙，有什么好的办法提供例子是最好啦！需要的是用js实现现在原有有关系的图片坐标都可以得到

解决方案 »

免费领取超大流量手机卡，每月29元包185G流量+100分钟通话, 中国电信官方发货

参考：
http://www.walterzorn.com/jsgraphics/jsgraphics_e.htm
http://download.csdn.net/source/590141
弄好了自己下载看
<HTML>
  <HEAD>
  <TITLE>New  Document </TITLE>
<script  Language="javascript">
      var x,y,divLeft,divTop;
    var isMove = false;
    var html = "";
  function MouseDown(obj)
  {
isMove = true;
x = event.clientX;
y = event.clientY;
divLeft = obj.offsetLeft;
divTop = obj.offsetTop;
  }
  function MouseMove(obj)
  {
if(isMove)
{
obj.style.left = divLeft  + event.clientX - x;
obj.style.top = divTop  + event.clientY - y;
}
  }
  function MouseUp(obj)
  {
isMove = false;
var a = parseInt(document.getElementById("div1").style.left);
var b = parseInt(document.getElementById("div1").style.top);
var c = parseInt(document.getElementById("div2").style.left);
var d = parseInt(document.getElementById("div2").style.top);
var e = parseInt(document.getElementById("div3").style.left);
var f = parseInt(document.getElementById("div3").style.top);
html =" <div id = 'div1' style='border:1px solid gray;width:42px;height:39px;position:absolute;left:"+a+"px;top:"+b+"px' onmousedown='MouseDown(this)' onmousemove='MouseMove(this)' onmouseup='MouseUp(this)'>a </div>";
line(a,b,c,d,"0000dd");
html += " <div id = 'div2' style='border:1px solid gray;width:45px;height:44px;position:absolute;left:"+c+"px;top:"+d+"px' onmousedown='MouseDown(this)' onmousemove=' MouseMove(this)' onmouseup='MouseUp(this)'>a </div>";
line(a,b,e,f,"0000dd");
html += " <div id = 'div3' style='border:1px solid gray;width:45px;height:44px;position:absolute;left:"+e+"px;top:"+f+"px' onmousedown='MouseDown(this)' onmousemove='MouseMove(this)' onmouseup='MouseUp(this)'>a </div>";
line(c,d,e,f,"0000dd");
document.body.innerHTML=html
  }
  function  a(x,y,color)
  {
  html +=" <img border='0' style='position:absolute;left:"+(x+20)+";top:"+(y+20)+";background-color:"+color+"'src='px.gif' width=1 height=1>";
  }
  function  line(x1,y1,x2,y2,color)
  {
      var  tmp
      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;
          a(x,y,color);
      }
  }
  function show()
  {
  html =" <div id = 'div1' style='border:1px solid gray;width:42px;height:39px;position:absolute;left:1px;top:1px' onmousedown='MouseDown(this)' onmousemove='MouseMove(this)' onmouseup='MouseUp(this)'>a </div>";
  line(1,1,100,100,"0000dd");
  html += " <div id = 'div2' style='border:1px solid gray;width:45px;height:44px;position:absolute;left:100px;top:100px' onmousedown='MouseDown(this)' onmousemove='MouseMove(this)' onmouseup='MouseUp(this)'>a </div>";
  line(1,1,200,1,"0000dd");
  html += " <div id = 'div3' style='border:1px solid gray;width:45px;height:44px;position:absolute;left:200px;top:1px' onmousedown='MouseDown(this)' onmousemove='MouseMove(this)' onmouseup='MouseUp(this)'>a </div>";
  line(200,1,100,100,"0000dd");
  document.body.innerHTML=html;
  }
</script>
</HEAD>
<body onload="show()">
</BODY>
</HTML>  这个虽然可以实现，但是有点慢，而且线在竖直的时候画的不是很好，
你看一下，可以改改
<HTML>
  <HEAD>
  <TITLE>New  Document </TITLE>
<script  Language="javascript">
      var x,y,divLeft,divTop;
    var isMove = false;
    var html = "";
  function MouseDown(obj)
  {
isMove = true;
x = event.clientX;
y = event.clientY;
divLeft = obj.offsetLeft;
divTop = obj.offsetTop;
  }
  function MouseMove(obj)
  {
if(isMove)
{
obj.style.left = divLeft  + event.clientX - x;
obj.style.top = divTop  + event.clientY - y;
}
  }
  function MouseUp(obj)
  {
isMove = false;
var a = parseInt(document.getElementById("div1").style.left);
var b = parseInt(document.getElementById("div1").style.top);
var c = parseInt(document.getElementById("div2").style.left);
var d = parseInt(document.getElementById("div2").style.top);
var e = parseInt(document.getElementById("div3").style.left);
var f = parseInt(document.getElementById("div3").style.top);
html =" <div id = 'div1' style='border:1px solid gray;width:42px;height:39px;position:absolute;left:"+a+"px;top:"+b+"px' onmousedown='MouseDown(this)' onmousemove='MouseMove(this)' onmouseup='MouseUp(this)'>a </div>";
line(a,b,c,d,"0000dd");
html += " <div id = 'div2' style='border:1px solid gray;width:45px;height:44px;position:absolute;left:"+c+"px;top:"+d+"px' onmousedown='MouseDown(this)' onmousemove=' MouseMove(this)' onmouseup='MouseUp(this)'>a </div>";
line(a,b,e,f,"0000dd");
html += " <div id = 'div3' style='border:1px solid gray;width:45px;height:44px;position:absolute;left:"+e+"px;top:"+f+"px' onmousedown='MouseDown(this)' onmousemove='MouseMove(this)' onmouseup='MouseUp(this)'>a </div>";
line(c,d,e,f,"0000dd");
document.body.innerHTML=html
  }
  function  a(x,y,color)
  {
  html +=" <img border='0' style='position:absolute;left:"+(x+20)+";top:"+(y+20)+";background-color:"+color+"'src='px.gif' width=1 height=1>";
  }
  function  line(x1,y1,x2,y2,color)
  {
      var  tmp
      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;
          a(x,y,color);
      }
  }
  function show()
  {
  html =" <div id = 'div1' style='border:1px solid gray;width:42px;height:39px;position:absolute;left:1px;top:1px' onmousedown='MouseDown(this)' onmousemove='MouseMove(this)' onmouseup='MouseUp(this)'>a </div>";
  line(1,1,100,100,"0000dd");
  html += " <div id = 'div2' style='border:1px solid gray;width:45px;height:44px;position:absolute;left:100px;top:100px' onmousedown='MouseDown(this)' onmousemove='MouseMove(this)' onmouseup='MouseUp(this)'>a </div>";
  line(1,1,200,1,"0000dd");
  html += " <div id = 'div3' style='border:1px solid gray;width:45px;height:44px;position:absolute;left:200px;top:1px' onmousedown='MouseDown(this)' onmousemove='MouseMove(this)' onmouseup='MouseUp(this)'>a </div>";
  line(200,1,100,100,"0000dd");
  document.body.innerHTML=html;
  }
</script>
</HEAD>
<body onload="show()">
</BODY>
</HTML>  这个虽然可以实现，但是有点慢，而且线在竖直的时候画的不是很好，
你看一下，可以改改
email: [email protected]多谢多谢