OA流程设计尝试:Div步骤拖动

前台代码:

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="DivShortMenu.aspx.cs" Inherits="DivShortMenu" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

//tdRight的范围

var startX = 200;

var startY = 50 ;

var endX = 400 ;

var endY = 400 ;

//拖动的对象

var StepNum = 0;

var TmpStep = 0;

var Obj;

function DragStart(obj)

{

//---------复制开始----------

var i=0;

var newName = obj.id+"1";

if(document.all(newName)!=null)

{

return false;

}

while(document.all(newName)!=null)

{

i++;

newName = obj.id+i;

}

var ii=0;

for(var j=0;j<document.all("tdRight").children.length;j++)

{

var tmpObj = document.all("tdRight").children[j];

if(tmpObj.id.substr(0,3)=="div")

{

ii++;

}

if(ii==0)

{

StepNum = 0;

}

var nowStep=0;

if(TmpStep !=0)

{

nowStep=TmpStep;

}

else

{

StepNum++;

nowStep=StepNum;

}

var strHTML = "<div id='"+newName+"' ";

strHTML+= " divValue='"+obj.divValue+"' ";

strHTML+= " divName='"+obj.divName+"' ";

strHTML+= " divStep='"+nowStep+"' ";

strHTML+= " onmousedown=MouseDown(this) ";

strHTML+= " onmousemove=MouseMove() ";

strHTML+= " onmouseup=MouseUp() ";

strHTML+= " style='position:absolute; 100px; height: 20px; border-right: green thin solid; border-top: green thin solid; border-left: green thin solid; border-bottom: green thin solid; ";

strHTML+= " top:"+obj.style.top+"; left:"+obj.style.left+"' ";

strHTML+= " > ";

strHTML+= " <table width='100%'><tr>";

// strHTML+= " <td style='font-size: 15px;' >第<input id='Text1' style='20;' type='text' value='"+StepNum+"' />步</td> ";

strHTML+= " <td style='font-size: 15px;' >第"+nowStep+"步</td> ";

strHTML+= " <td align='right' style='font-size: 10px;' onclick='fn_divClose("+newName+")'>关闭</td> ";

strHTML+= " </tr> ";

strHTML+= " <tr><td colspan='2'> ";

strHTML+= obj.innerText;

strHTML+= " </td></tr> ";

strHTML+= " </table>";

strHTML+= " </div> ";

document.all("tdRight").innerHTML += strHTML;

Obj=document.all(newName);

//---------复制结束----------

TmpStep = 0;//清空重复步

//Obj = obj;

Obj.setCapture();

Obj.l=event.x-Obj.style.pixelLeft;

Obj.t=event.y-Obj.style.pixelTop;

}

function fn_divClose(divName)

{

var nowDelStep = divName.divStep;

divName.removeNode(true);

StepNum--;

//相关的步骤名称

for(var j=0;j<document.all("tdRight").children.length;j++)

{

var tmpObj = document.all("tdRight").children[j];

if(tmpObj.id.substr(0,3)=="div")

{

if(tmpObj.divStep>nowDelStep)

{

var tmpStep = parseInt(tmpObj.divStep) - 1;

tmpObj.divStep = tmpStep ;

tmpObj.children(0).children(0).children(0).children(0).innerText = "第" +tmpStep+"步";

}

function MouseDown(obj)

{

Obj = obj;

Obj.setCapture();

Obj.l=event.x-Obj.style.pixelLeft;

Obj.t=event.y-Obj.style.pixelTop;

}

function fn_onclick(obj)

{

}

function MouseMove()

{

if(Obj!=null)

{

// var XX = event.x;

// var YY = event.y;

// if(XX<startX)

// XX=startX;

// if(XX>endX)

// XX=endX;

// if(YY<startY)

// YY=startY;

// if(YY>endY)

// yy=endY;

// Obj.style.left = XX-Obj.l;

// Obj.style.top = YY-Obj.t;

Obj.style.left = event.x-Obj.l;

Obj.style.top = event.y-Obj.t;

}

function MouseUp()

{

if(Obj!=null)

{

Obj.releaseCapture();

Obj=null;

}

function fn_btn_onclick()

{

//得到目前tdRight中的div对象

var i=0;

var str="";

for(var j=0;j<document.all("tdRight").children.length;j++)

{

var tmpObj = document.all("tdRight").children[j];

if(tmpObj.id.substr(0,3)=="div")

{

i++;

str+=tmpObj.divValue+tmpObj.divName+" - ";

}

document.all("Text1").value = i;

document.all("Text2").value = str;

}

function fn_btn2_onclick()

{

if(document.all("Text3").value!="")

{

if(document.all("Text3").value <= StepNum)

{

TmpStep = document.all("Text3").value;

}

</script>

</head>

<body>

</td>

</tr>

</table>

</form>

</body>

</html>

后台代码:

using System;

using System.Data;

using System.Configuration;

using System.Collections;

using System.Web;

using System.Web.Security;

using System.Web.UI;

using System.Web.UI.WebControls;

using System.Web.UI.WebControls.WebParts;

using System.Web.UI.HtmlControls;

public partial class DivShortMenu : System.Web.UI.Page

{

protected void Page_Load(object sender, EventArgs e)

{

if (!IsPostBack)

{

#region 构造数据源dt

DataTable dt = new DataTable();

dt.Columns.Add("tmpID");

dt.Columns.Add("tmpName");

DataRow dr1 = dt.NewRow();

dr1["tmpID"] = "001";

dr1["tmpName"] = "张三";

dt.Rows.Add(dr1);

DataRow dr2 = dt.NewRow();

dr2["tmpID"] = "002";

dr2["tmpName"] = "李四";

dt.Rows.Add(dr2);

DataRow dr3 = dt.NewRow();

dr3["tmpID"] = "003";

dr3["tmpName"] = "王五";

dt.Rows.Add(dr3);

DataRow dr4 = dt.NewRow();

dr4["tmpID"] = "004";

dr4["tmpName"] = "赵六";

dt.Rows.Add(dr4);

#endregion

#region 绑定到页面显示

string strHTML = "";

for (int i = 0; i < dt.Rows.Count; i++)

{

strHTML += " <div style=' position:absolute; left:10px; top:"+(20+i*20)+"px; 100px; height: 20px; border-right: green thin solid; border-top: green thin solid; border-left: green thin solid; border-bottom: green thin solid;' ";

strHTML += " id=div" + dt.Rows[i]["tmpID"].ToString().Trim() + " ";

strHTML += " divValue="+dt.Rows[i]["tmpID"].ToString().Trim();

strHTML += " divName=" + dt.Rows[i]["tmpName"].ToString().Trim();

strHTML += " divStep=0 ";

strHTML += " onmousedown='DragStart(this)' ";

strHTML += " >";

strHTML += dt.Rows[i]["tmpName"].ToString().Trim();

strHTML += " </div> ";

}

this.tdLeft.InnerHtml = strHTML;

#endregion

}

TrackBack：http://www.cnblogs.com/freeliver54/archive/2007/11/19/964265.html