注册 登录
编程论坛 → JavaScript论坛

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

gu_tong2008 发布于 2009-09-18 13:57， 3507 次点击
不知道有没有高手可以用javascript实现两个div之间有连线，并且拖动任一个div其连线可以自由伸缩？能否举个例子？把源码上传上来看看，急，在线等。
10 回复
#2
gu_tong20082009-09-22 13:49
哇！我的问题怎么没有人会啊，看来真是难倒一大批高手了！哈！
#3
foktime2009-09-22 15:08
程序代码：
<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
gu_tong20082009-09-23 10:11
<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
foktime2009-09-23 10:36
没太看懂你的意思，在需要右键的地方加上  onmousedown="if(event.button == 2) alert('点击右键了！');在里面写你的菜单代码；ondblclick="test();"test()里面写你的双击事件
#6
gu_tong20082009-09-23 11:57
没太看懂你的意思，在需要右键的地方加上  onmousedown="if(event.button == 2) alert('点击右键了！');在里面写你的菜单代码；ondblclick="test();"test()里面写你的双击事件





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

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

[ 本帖最后由 gu_tong2008 于 2009-9-23 11:59 编辑 ]
#7
foktime2009-09-23 13:58
自己添啦，别太懒 你就往上加事件就是了，怎么加上面已经和你说了
#8
gu_tong20082009-09-23 14:07
我是没看懂你的意思了，我不知道要那里添，怎样添，你添上去我才明白，哥们，谢了！


[ 本帖最后由 gu_tong2008 于 2009-9-23 14:11 编辑 ]
#9
foktime2009-09-23 14:21
<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
gu_tong20082009-09-23 14:42
哥们，谢谢你这么耐心帮助我，但我按照你说的添加上去后，两个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;//屏蔽掉的右键菜单  
} 要怎么加，加在那里？哎，我真的很笨，我快晕死了，

你能不能帮我添加上去然后把源码全部再传上来？我先谢谢你了！我请你喝咖啡：！
#11
gu_tong20082009-09-23 15:36
哥们，你怎么不回答我了？
1
©2025, BC-CN.NET
电脑版