怎样用javascript实现两个div之间有连线，并且可以拖动？ - JavaScript论坛

楼主

已结贴√ 问题点数：20 回复次数：10

怎样用javascript实现两个div之间有连线，并且可以拖动？

不知道有没有高手可以用javascript实现两个div之间有连线，并且拖动任一个div其连线可以自由伸缩？能否举个例子？把源码上传上来看看，急，在线等。

搜索更多相关主题的帖子: javascript　div　拖动　

第 2 楼

得分:0

哇！我的问题怎么没有人会啊，看来真是难倒一大批高手了！哈！

第 3 楼

得分:20

程序代码：

<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);  
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>";  
  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>";  
  document.body.innerHTML=html;  
  }  
</script>     
</HEAD>   
<body onload="show()">  
</BODY>   
</HTML>

网上搜的。

第 4 楼

得分:0

<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);
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>";
  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>";
  document.body.innerHTML=html;
  }
</script>
</HEAD>
<body onload="show()">
</BODY>
</HTML>

谢谢foktime这位朋友！但你的例子还有个小问题，那就是拖动div的时候div移动不是很顺畅！
还有就是能不能在此基础上用js实现右键单击其中一个div弹出相应的菜单，而且用鼠标双击其中一个div触发一个事件呢？举个例子，把源码上传上来，谢了，本人等你的回复，呵呵！

[ 本帖最后由 gu_tong2008 于 2009-9-23 10:26 编辑 ]

第 5 楼

得分:0

没太看懂你的意思，在需要右键的地方加上 onmousedown="if(event.button == 2) alert('点击右键了！');在里面写你的菜单代码；ondblclick="test();"test()里面写你的双击事件

第 6 楼

得分:0

呵呵，这么快就回复了，我的意思是说用右键单击任一个div会有我们自己定义的菜单，然后就是双击任一个div会触发一个事件，

你能否修改一下，把源码再传一遍上来，非常感谢！

[ 本帖最后由 gu_tong2008 于 2009-9-23 11:59 编辑 ]

第 7 楼

得分:0

自己添啦，别太懒

你就往上加事件就是了，怎么加上面已经和你说了

第 8 楼

得分:0

我是没看懂你的意思了，我不知道要那里添，怎样添，你添上去我才明白，哥们，谢了！

[ 本帖最后由 gu_tong2008 于 2009-9-23 14:11 编辑 ]

第 9 楼

得分:0

<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)' ondblclick="test();">a </div>加在这，明白？
关于右键上面说的方法可能在这不太好用，你可以这么写
document.getElementById('div1').oncontextmenu = function()
{
alert("点击了鼠标右键");//弹出提示:"点击了鼠标右键";
return false;//屏蔽掉的右键菜单
}

第 10 楼

得分:0

哥们，谢谢你这么耐心帮助我，但我按照你说的添加上去后，两个div及连线不见了，而且页面还报错，不知道为什么，哎，我真笨！

<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)' ondblclick="test();">a </div>加在这，明白？

有好几个地方跟你说的是相同的，呵呵，还有
document.getElementById('div1').oncontextmenu = function()
{
  alert("点击了鼠标右键");//弹出提示:"点击了鼠标右键";
  return false;//屏蔽掉的右键菜单
} 要怎么加，加在那里？哎，我真的很笨，我快晕死了，

你能不能帮我添加上去然后把源码全部再传上来？我先谢谢你了！我请你喝咖啡：

！