前一段再做图形化的工作流，有类似的拖拽功能，给你提供个思路1.定义2个对象
1）function LayerObj(){//
this.inLines = [];//输入的线，
this.outLines = [];//输出的线，例如layer1由2条
...
} LayerObj.prototype.onmousemove = function(){
//LayerObj拖拽你会了
this.update();//重新画线
return;
}
LayerObj.prototype.update = function() {
for(var i=0; i<this.inLines.length; i++){
this.inLines[i].update();
}
for(var i=0; i<this.outLines.length; i++){
this.outLines[i].update();
}
}
Transition.prototype.update = function(){
...//在此处计算线的起始坐标
for(var i=0; i<this.lines.length; i++){
this.lines[i].from = this.points[2*i].x + "," + this.points[2*i].y;
this.lines[i].to = this.points[2*i+1].x + "," + this.points[2*i+1].y;
}
}
function Transition(begin, end, name){
this.begin = begin;//开始的layer
this.end = end;//结束的layer
this.lines = [];//用VML画的线
this.points = [];//线的起始坐标
}Transition.prototype.init = function(){
//initialize the point
for(var i=0; i<6; i++){
this.points[i] = {x:0, y:0};
}
//initialize the line
for(var i=0; i<3; i++){
var line = document.createElement("v:line");
line.from = "0, 0";
line.to = "0, 0";
this.lines.push(line);
}
var stroke = document.createElement("v:stroke");
stroke.endArrow = "classic";
this.lines[2].appendChild(stroke);
}
1）function LayerObj(){//
this.inLines = [];//输入的线，
this.outLines = [];//输出的线，例如layer1由2条
...
} LayerObj.prototype.onmousemove = function(){
//LayerObj拖拽你会了
this.update();//重新画线
return;
}
LayerObj.prototype.update = function() {
for(var i=0; i<this.inLines.length; i++){
this.inLines[i].update();
}
for(var i=0; i<this.outLines.length; i++){
this.outLines[i].update();
}
}
Transition.prototype.update = function(){
...//在此处计算线的起始坐标
for(var i=0; i<this.lines.length; i++){
this.lines[i].from = this.points[2*i].x + "," + this.points[2*i].y;
this.lines[i].to = this.points[2*i+1].x + "," + this.points[2*i+1].y;
}
}
function Transition(begin, end, name){
this.begin = begin;//开始的layer
this.end = end;//结束的layer
this.lines = [];//用VML画的线
this.points = [];//线的起始坐标
}Transition.prototype.init = function(){
//initialize the point
for(var i=0; i<6; i++){
this.points[i] = {x:0, y:0};
}
//initialize the line
for(var i=0; i<3; i++){
var line = document.createElement("v:line");
line.from = "0, 0";
line.to = "0, 0";
this.lines.push(line);
}
var stroke = document.createElement("v:stroke");
stroke.endArrow = "classic";
this.lines[2].appendChild(stroke);
}
"urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office" xmlns="http://www.w3.org/TR/REC-html40"> <HEAD> <TITLE>顺德情报信息系统情报采集 </TITLE>
<META http-equiv=Content-Type content="text/html; charset=gb2312">
<STYLE>v\:* {BEHAVIOR: url(#default#VML)
}
</STYLE>
<LINK href="Thinking in VML7.files/style.css" type=text/css rel=stylesheet>
<META content="MSHTML 6.00.2900.3059" name=GENERATOR>
<link rel="File-List" href="有关.files/filelist.xml">
<!--[if gte mso 9]>
<xml><o:shapedefaults v:ext="edit" spidmax="1027"/>
</xml><![endif]-->
</HEAD>
<BODY>
<script>
var x,y,z,down=false,obj
function init(){
obj=event.srcElement //事件触发对象
obj.setCapture() //设置属于当前对象的鼠标捕捉
z=obj.style.zIndex //获取对象的z轴坐标值
//设置对象的z轴坐标值为100，确保当前层显示在最前面
obj.style.zIndex=100
x=event.offsetX //获取鼠标指针位置相对于触发事件的对象的X坐标
y=event.offsetY //获取鼠标指针位置相对于触发事件的对象的Y坐标
down=true //布尔值，判断鼠标是否已按下，true为按下，false为未按下
} function moveit(){
//判断鼠标已被按下且onmouseover和onmousedown事件发生在同一对象上
if(down&&event.srcElement==obj){
with(obj.style){
/*设置对象的X坐标值为文档在X轴方向上的滚动距离加上当前鼠标指针相当于文档对象的X坐标值减鼠标按下时指针位置相对于触发事件的对象的X坐标*/
posLeft=document.body.scrollLeft+event.x-x
/*设置对象的Y坐标值为文档在Y轴方向上的滚动距离加上当前鼠标指针相当于文档对象的Y坐标值减鼠标按下时指针位置相对于触发事件的对象的Y坐标*/
posTop=document.body.scrollTop+event.y-y
}
/////////////////----caiying2009-----///////////////////
if (obj.id=="Layer1")
changV("_x0000_s1026","","",obj.style.posLeft*0.8,(obj.style.posTop-obj.offsetHeight)*0.8)
if (obj.id=="Layer3")
changV("_x0000_s1025","","",obj.style.posLeft*0.8,(obj.style.posTop-obj.offsetHeight)*0.8)
if (obj.id=="Layer2"){
changV("_x0000_s1026",obj.style.posLeft*0.8,(obj.style.posTop+obj.offsetHeight)*0.65,"","")
changV("_x0000_s1025",obj.style.posLeft*0.8,(obj.style.posTop+obj.offsetHeight)*0.65,"","")
}
//////////////////----caiying2009-----//////////////////
}
} function stopdrag(){
//onmouseup事件触发时说明鼠标已经松开，所以设置down变量值为false
down=false
obj.style.zIndex=z //还原对象的Z轴坐标值
obj.releaseCapture() //释放当前对象的鼠标捕捉
}
</script> <script language="javascript">
<!--
//----caiying2009-----
function changV(id,fx,fy,tx,ty){
var obj=document.getElementById(id)
if (fx!="")
obj.from=fx+"pt,"+fy+"pt"
if (tx!="")
obj.to=tx+"pt,"+ty+"pt"
}
//-->
</script><p><!--[if gte vml 1]><v:line id="_x0000_s1026"
from="127.5pt,30pt" to="52.5pt,127.5pt" strokeweight="1pt">
<v:stroke endarrow="classic"/>
</v:line><![endif]--><![if !vml]><img border=0 width=107 height=136
src="有关178.files/image001.gif" v:shapes="_x0000_s1026"><![endif]></p>
<p><!--[if gte vml 1]><v:line
id="_x0000_s1025" from="153pt,30pt" to="250.5pt,127.5pt" strokeweight="1pt">
<v:stroke endarrow="classic"/>
</v:line><![endif]--><![if !vml]><img border=0 width=136 height=136
src="有关178.files/image002.gif" v:shapes="_x0000_s1025"><![endif]></p>
<div id="Layer1" onmousedown=init() onmousemove=moveit() onmouseup=stopdrag() style="position:absolute;left:20;top:190;width:100;height:50;border:1px solid #000000;z-index:1;background:#eeeeee">Layer 1 </div>
<div id="Layer2" onmousedown=init() onmousemove=moveit() onmouseup=stopdrag() style="position:absolute;left:160;top:10;width:100;height:50;border:1px solid #000000;z-index:2;background:#eeeeee">Layer 2 </div>
<div id="Layer3" onmousedown=init() onmousemove=moveit() onmouseup=stopdrag() style="position:absolute;left:300;top:190;width:100;height:50;border:1px solid #000000;z-index:3;background:#eeeeee">Layer 3 </div> </body></html>