求js画div之间的连线；div拖动时，连线也随着拖动！
如题 ↑
如下图：
图中的一个设备图就是一个div。
设备图我已可以实现，现在只需实现有关系(如图)的div之间创建它们的连线，拖动div时，连线也随着拖动/延长。
[解决办法]
学习
[解决办法]
老兄我的可以画图了！！
[解决办法]
用的是vml！！
[解决办法]
流程图！！
[解决办法]
根据数据库的内容画图！！
[解决办法]
不过没有加拖动的函数！！
[解决办法]
学习
[解决办法]
看哈。。。
[解决办法]
曾经见过一个朋友在CRM中用JS实现的拖拉流程图.太牛了..
DIV上能有热点属性吗?热点之间的关系呢?
在DIV的ATTRIBUTE中记住关系,每执行移动后再重绘与之有关的线条.
[解决办法]
作了一个比较苯的
<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>
[解决办法]
继续改进中
[解决办法]
如果你要同时兼容IE与FF的话，必须同时支持两套绘图系统──IE用VML、FF用Canvas。这两套绘图系统都能轻易实现你的需求，但你就是必须分开来做。
[解决办法]
开眼界了
[解决办法]
提供一下我的方法，首先划直线方法
- Java code
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; width:"+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+";width: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;width:1;position:absolute;font-size:1px;background-color:"+color+"'></span>"; } rs = rs.join(""); } return rs }
[解决办法]
好麻烦，终于上传了。
[解决办法]
[解决办法]
你还是学学vml吧，如果用js你这个得很费劲的
[解决办法]
<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>