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+= " onmousedown=MouseDown(this) ";
  strHTML+= " onmousemove=MouseMove() ";
  strHTML+= " onmouseup=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;' 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>
    <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

            绑定到页面显示
        }
    }
}

posted on 2007-11-19 14:50  freeliver54  阅读(1284)  评论(4)  编辑  收藏  举报

导航