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

最新推荐文章于 2023-10-06 11:35:27 发布

weixin_34060741

最新推荐文章于 2023-10-06 11:35:27 发布

阅读量354

点赞数

文章标签： ui xhtml c#

原文链接：http://www.cnblogs.com/hdjjun/archive/2008/06/17/1223961.html

版权

前台代码:

<% @ 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 " >

< html xmlns = " http://www.w3.org/1999/xhtml " >

< head runat = " server " >

< title > 无标题页 </ title >

< script type = " text/javascript " >

// 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+= " οnmοusedοwn=MouseDown(this) ";

strHTML+= " οnmοusemοve=MouseMove() ";

strHTML+= " οnmοuseup=MouseUp() ";

strHTML+= " style='position:absolute; width: 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='width:20;' type='text' value='"+StepNum+"' />步</td> ";

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

strHTML+= " <td align='right' style='font-size: 10px;' οnclick='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 >

< form id = " form1 " runat = " server " >

< table border = " 1 " bordercolor = " black " >

< tr height = " 400 " valign = " top " >

< td runat = " server " id = " tdLeft " width = " 110 " style = " border-right: black 1px solid; " >

</ td >

< td runat = " server " id = " tdRight " width = " 400 " ></ td >

</ tr >

</ table >

< input id = " Button1 " type = " button " value = " 查看步骤 " onclick = " fn_btn_onclick(); " />

< input id = " Text1 " type = " text " />

< input id = " Text2 " type = " text " />

< input id = " Button2 " type = " button " value = " 一步多对象 " onclick = " fn_btn2_onclick(); " />

< input id = " Text3 " type = " text " />

</ 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)

{

构造数据源dt#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; width: 100px; height: 20px; border-right: green thin solid; border-top: green thin solid; border-left: green thin solid; border-bottom: green thin solid;' ";