VML WorkFlow
<html xmlns:v="urn:schemas-microsoft-com:vml">
<head>
<TITLE>Sailflying WorkFlow 1.0</TITLE>
<STYLE>
v\:* { Behavior: url(#default#VML) }
</STYLE>
<style type="text/css">
<!--
div {
background-image: url('workflow2.gif');
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
}
.drag{cursor:move}
.hand{cursor:hand}
}
-->
</style>
<script>
var flagMove = flagAddLine = oLineStart = oLineEnd = null;
var AddX = 150, AddY = 120;
function window.onload()
{
ChangeImgColor(7)
}
function ChangeImgColor(iNo)
{
if((iNo>7)||(iNo<1)){return}
for(i=1;i<8;i++)
{
eval('img'+i+'.style.borderColor="white"') ;
}
eval('img'+iNo+'.style.borderColor="red"') ;
}
function AddFlow(iNo){
ChangeImgColor(7)
switch (iNo)
{
case 1 : //<!-- 流程节点： 开始 -->
WorkFlow.insertAdjacentHTML('beforeEnd','<v:oval class="drag" style="position:absolute;left:10;top:10;width:50;height:40" genre="node" strokeweight="2pt" StrokeColor="#95DB4F" fillcolor="#FFFFCC" line="" onmousemove = "MoveObj()" onmousedown = "FindObj()" onmouseup = "ReleaseObj()" ondragstart ="return false ;" onselectstart = "return false ;"> <v:TextBox inset="1pt,5pt,1pt,1pt" style="font-size:12pt;" class="hand">开始</v:TextBox></v:oval>')
break;
case 2 : //<!-- 流程节点： 过程 -->
WorkFlow.insertAdjacentHTML('beforeEnd','<v:RoundRect style="position:absolute;width:100;height:50px;" class="drag" genre="node" title="过程\n" strokeweight="2pt" StrokeColor="#95DB4F" fillcolor="#FFFFCC" line="" onmousemove = "MoveObj()" onmousedown = "FindObj()" onmouseup = "ReleaseObj()" ondragstart ="return false ;" onselectstart = "return false ;" ><v:TextBox inset="10pt,5pt,1pt,1pt" style="font-size:12pt;" class="hand">点击此处<br/>填写过程</v:TextBox></v:RoundRect>')
break;
case 3 : //<!-- 流程节点： 决策 -->
WorkFlow.insertAdjacentHTML('beforeEnd','<v:PolyLine Points="0,30 50,60 100,30 50,0 0,30" style="position:absolute;width:100;height:50px;" class="drag" genre="node" title="决策\n" strokeweight="2pt" StrokeColor="#95DB4F" fillcolor="#FFFFCC" line="" onmousemove = "MoveObj()" onmousedown = "FindObj()" onmouseup = "ReleaseObj()" ondragstart ="return false ;" onselectstart = "return false ;" ><v:TextBox inset="15pt,15pt,1pt,1pt" style="font-size:12pt;" class="hand">填写决策</v:TextBox></v:PolyLine>')
break;
case 4 : //<!-- 流程节点： 结束 -->
WorkFlow.insertAdjacentHTML('beforeEnd','<v:oval class="drag" style="position:absolute;left:10;top:10;width:50;height:40" genre="node" strokeweight="2pt" StrokeColor="#95DB4F" fillcolor="#FFFFCC" line="" onmousemove = "MoveObj()" onmousedown = "FindObj()" onmouseup = "ReleaseObj()" ondragstart ="return false ;" onselectstart = "return false ;"> <v:TextBox inset="1pt,5pt,1pt,1pt" style="font-size:12pt;" class="hand">结束</v:TextBox></v:oval>')
break;
case 5: //<!-- 流程节点： 转移 -->
break;
case 6 : //<!-- 流程节点： 折线 -->
ChangeImgColor(6)
AddLine()
break;
case 7 : //移动
break;
default :
return false;
}
AddX += 30;
AddY += 30;
if(AddX >= 350){
AddX = 150;
AddY = 120;
}
}
function FindObj(){
if (!document.all) {return }
if (event.srcElement.genre!="node" ){return }
if(event.button == 1 && flagAddLine == null){
if(oLineStart != null){
//oLineStart.border = 0;
oLineStart.StrokeColor='yellow'
zuobiao.innerHTML += oLineStart.uniqueID
}
if(oLineEnd != null){
//oLineEnd.border = 0;
oLineEnd.StrokeColor='yellow'
zuobiao.innerHTML += oLineEnd.uniqueID
}
flagMove = event.srcElement;
flagMove.setCapture();
x = event.offsetX;
y = event.offsetY;
}
if(flagAddLine == 1){
oLineStart = event.srcElement;
////oLineStart.border = 1;
oLineStart.StrokeColor='red'
//////////////oLineStart.style.borderColor = "red";
flagAddLine = 2;
return;
}
if(flagAddLine == 2)
{
if(oLineStart != event.srcElement)
{
oLineEnd = event.srcElement;
//oLineEnd.border = 1;
//oLineEnd.style.borderColor = "red";
oLineEnd.StrokeColor='red'
if(!document.all)
{
zuobiao.innerHTML += oLineStart.uniqueID + "and" + oLineEnd.uniqueID
// WorkFlow.insertAdjacentHTML("beforeEnd","<v:line class='drag' strokeweight='2pt' StrokeColor='#FF6600' id='" + oLineStart.uniqueID + "and" + oLineEnd.uniqueID + "' style='position:absolute;' from='" + (parseInt(oLineStart.style.pixelLeft) + parseInt(oLineStart.style.width)) + "," + (parseInt(oLineStart.style.pixelTop) + parseInt(oLineStart.style.height)/2) + "' to='" + parseInt(oLineEnd.style.pixelLeft) + "," + (parseInt(oLineEnd.style.pixelTop) + parseInt(oLineEnd.style.height)/2) + "'><v:stroke StartArrow='Oval' EndArrow='Classic' /></v:line>");
//alert( '<v:PolyLine class="drag" strokeweight="2pt" StrokeColor="#FF6600" id="' + oLineStart.uniqueID + 'and' + oLineEnd.uniqueID + '" style="position:absolute;" Points= "'+from1+','+from2+' '+(to1+50)+','+from2+' '+(to1+50)+','+to2+' '+to1+','+to2+'" ><v:stroke StartArrow="Oval" EndArrow="Classic" /></v:PolyLine>');
//<v:PolyLine filled="false" Points="65,0 0,0 0,75 " style="position:absolute;left:300;top:300;width:50;height:50" ondblclick= "this.outerHTML="" ' strokeweight="2pt" StrokeColor="#FF6600" > <v:stroke StartArrow="Oval" EndArrow="Classic" /></v:PolyLine>
LineMove(oLineStart,oLineEnd,'',1)
oLineStart.line += (oLineStart.uniqueID + "and" + oLineEnd.uniqueID + ";");
oLineEnd.line += (oLineStart.uniqueID + "and" + oLineEnd.uniqueID + ";");
//<v:line style="position:absolute" from="400,200" to="400,275" class="drag" myClass="Line" strokeweight="2pt" StrokeColor="#FF6600" ><v:stroke StartArrow="Oval" EndArrow="Classic" /></v:line>
}
}
else{
////oLineStart.border = 0;
oLineStart.StrokeColor='#95DB4F'
}
flagAddLine = null;
ChangeImgColor(7);
}
}
function MoveObj(){
if(flagMove != null){
flagMove.style.left = event.clientX - WorkFlow.offsetLeft - document.body.clientLeft - WorkFlow.clientLeft - x;
flagMove.style.top = event.clientY - WorkFlow.offsetTop - document.body.clientTop - WorkFlow.clientTop - y;
if(flagMove.style.pixelLeft < 0)flagMove.style.left = 0;
if(flagMove.style.pixelTop < 0)flagMove.style.top = 0;
/*if(flagMove.style.pixelLeft > (WorkFlow.clientWidth - flagMove.offsetWidth)){
flagMove.style.left = (WorkFlow.clientWidth - flagMove.offsetWidth);
}
if(flagMove.style.pixelTop > (WorkFlow.offsetHeight - flagMove.offsetHeight)){
flagMove.style.top = (WorkFlow.clientHeight - flagMove.offsetHeight);
}*/
//move lines
aLines = flagMove.line.split(";");
for( var i = 0; i < aLines.length - 1; i ++ ){
var oLineStart = eval(aLines.split("and"));
var oLineEnd = eval(aLines.split("and"));
/*
eval(aLines + ".from='" + ( parseInt(oLineStart.style.pixelLeft) + parseInt(oLineStart.style.width)) + " ," + ( parseInt(oLineStart.style.pixelTop) + parseInt(oLineStart.style.height)/2) + " '");
eval(aLines + ".to='" + parseInt(oLineEnd.style.pixelLeft) + " ," + ( parseInt(oLineEnd.style.pixelTop) + parseInt(oLineEnd.style.height)/2) + " '");
*/
LineMove(oLineStart,oLineEnd,aLines,2)
//WorkFlow.insertAdjacentHTML('beforeEnd','<v:PolyLine filled="false" style="position:absolute;width:50px;height:50px;" class="drag" strokeweight="2pt" StrokeColor="#FF6600" id="' + oLineStart.uniqueID + 'and' + oLineEnd.uniqueID + '" Points="'+from1+','+from2+' '+(to1+50)+','+from2+' '+(to1+50)+','+to2+' '+to1+','+to2+'"><v:stroke StartArrow="Oval" EndArrow="Classic" /></v:PolyLine>');
}
}
}
function LineMove(oLineStart,oLineEnd,aLines,TypeNo)
{
from1 = parseInt(oLineStart.style.pixelLeft) + parseInt(oLineStart.style.width)/2
from2 = parseInt(oLineStart.style.pixelTop) + parseInt(oLineStart.style.height)/2
to1 = parseInt(oLineEnd.style.pixelLeft) + parseInt(oLineEnd.style.width)/2
to2 = parseInt(oLineEnd.style.pixelTop)+ parseInt(oLineEnd.style.height)/2
if ( from1>to1)
{
to1 = parseInt(oLineEnd.style.pixelLeft) + parseInt(oLineEnd.style.width)
to2 = parseInt(oLineEnd.style.pixelTop)+ parseInt(oLineEnd.style.height)/2
spacing = 50
}
else if ( from1==to1)
{
to1 = from1
spacing = 0
if ( from2>to2)
{
to2 = parseInt(oLineEnd.style.pixelTop) + parseInt(oLineEnd.style.height)
}
else
{
to2 = parseInt(oLineEnd.style.pixelTop)
}
}
else
{
to1 = parseInt(oLineEnd.style.pixelLeft)
to2 = parseInt(oLineEnd.style.pixelTop)+ parseInt(oLineEnd.style.height)/2
spacing = -50
}
if (TypeNo==1)
{
WorkFlow.insertAdjacentHTML('beforeEnd','<v:PolyLine filled="false" style="position:absolute;width:50px;height:50px;z-index:-99" class="hand" strokeweight="2pt" StrokeColor="#FF6600" id="' + oLineStart.uniqueID + 'and' + oLineEnd.uniqueID + '" Points="'+from1+','+from2+' '+(to1+spacing)+','+from2+' '+(to1+spacing)+','+to2+' '+to1+','+to2+'"><v:stroke StartArrow="Diamond" EndArrow="Classic" /></v:PolyLine>');
}
if (TypeNo==2)
{
eval(aLines + '.Points.value="'+from1+','+from2+' '+(to1+spacing)+','+from2+' '+(to1+spacing)+','+to2+' '+to1+','+to2+'"')
}
}
function ReleaseObj(){
if(flagMove != null){
flagMove.releaseCapture();
flagMove = null;
ChangeImgColor(7);
}
}
function AddLine(){
flagAddLine = 1;
}
function mousedown(){
if(event.srcElement.genre!="node" ){
flagAddLine = null;
if(oLineStart != null){
////oLineStart.border = 0;
oLineStart.StrokeColor='#95DB4F'
}
if(oLineEnd != null){
//oLineEnd.border = 0;
oLineEnd.StrokeColor='#95DB4F'
}
}
}
document.onmousedown = mousedown;
</script>
</head>
<body text="#000000" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" onselectstart="return false;" bgcolor="#DFEFFF" >
<br/><br/>
<table border="0" cellpadding="0" cellspacing="0" >
<tr>
<td width="80px"> </td>
<td width="100px"><img src="flow7.gif" alt="移动" border=1 id="img7" onclick=";AddFlow(7);" ondragstart="return false" class="hand"></td>
<td width="100px" style="display:none"><img src="flow1.gif" alt="开始" border=1 id="img1" onclick="AddFlow(1)" ondragstart="return false" class="hand"></td>
<td width="100px"><img src="flow2.gif" alt="过程" border=1 id="img2" onclick="AddFlow(2)" ondragstart="return false" class="hand"></td>
<td width="100px"><img src="flow3.gif" alt="决策"border=1 id="img3" onclick="AddFlow(3)" ondragstart="return false" class="hand"></td>
<td width="100px"><img src="flow4.gif" alt="结束" border=1 id="img4" onclick="AddFlow(4)" ondragstart="return false" class="hand"></td>
<td width="100px"><img src="flow5.gif" alt="子流程" border=1 id="img5" onclick="AddFlow(5)" ondragstart="return false" class="hand"></td>
<td width="100px"><img src="flow6.gif" alt="连线" border=1 id="img6" onclick="AddFlow(6)" ondragstart="return false" class="hand"></td>
</tr>
</table>
<br/>
<div id=WorkFlow style="position:relative ; width:100% ; height:500 ; overflow:hidden ; border:2 inset #fff9f3 ; overflow: auto;">
<!-- 流程节点： 开始 -->
<v:oval style="position:absolute;left:300;top:10;width:50;height:40" genre="node" strokeweight="2pt" StrokeColor="#95DB4F" fillcolor="#FFFFCC" class="drag" line="" onmousemove = "MoveObj()" onmousedown = "FindObj()" onmouseup = "ReleaseObj()" ondragstart ="return false ;" onselectstart = "return false ;"> <v:TextBox inset="1pt,5pt,1pt,1pt" style="font-size:12pt;" class="hand">开始</v:TextBox></v:oval>
<!-- 流程节点： 过程 -->
<v:RoundRect style="position:absolute;left:280;top:100;width:100;height:50px;" class="drag" genre="node" title="过程\n" strokeweight="2pt" StrokeColor="#95DB4F" fillcolor="#FFFFCC" line="" onmousemove = "MoveObj()" onmousedown = "FindObj()" onmouseup = "ReleaseObj()" ondragstart ="return false ;" onselectstart = "return false ;">
<v:TextBox inset="10pt,5pt,1pt,1pt" style="font-size:12pt;" class="hand">点击此处<br/>填写过程</v:TextBox></v:RoundRect>
</div>
<table width="100%" border="0" cellpadding="0" cellspacing="5" bgcolor="#99CC00">
<tr>
<td id="zuobiao" style="display:none"> </td>
</tr>
</table>
</body>
</html>
最近对VML的了解又增加了一些，
所以把 经典论坛里的 ncs 的帖子 “vml 在 ie5.0 下不兼容的问题”
里的功能又学习了一遍 不错不错 很不错应用 因为我发现不靠齐的时候，连线都要转折
所以下一步要作的功能：
1。对象根据网格自动靠齐
2。自由设置网格参数
3。拖动对象时判断坐标上是否已经存在对象 网格参数的设置功能也完成了。
直剩下判断坐标点上是否存在对象这个功能了。
思路大致就想上面提到的那样，
用一个字符串来记录各个对象的坐标了。
功能效果：
http://www.gaofan.com/gf_temp/workflow_20040621.htm
前台完成的差不多了
这个功能完成了就开始写xml的操作了 我的浏览器是ie6.0..
http://www.gaofan.com/gf_temp/workflow_20040621.htm 上面有个连线的功能不能实现 要是能把源码发出来学习一下就更好了
页:
[1]