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

< 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;' ";
                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 += " οnmοusedοwn='DragStart(this)' ";
                strHTML += " >";
                strHTML += dt.Rows[i]["tmpName"].ToString().Trim();
                strHTML += " </div> ";                
            }
            this.tdLeft.InnerHtml = strHTML;
            #endregion
        }
    }
}