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

zoukankan html css js c++ java

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

            绑定到页面显示
        }
    }
}

查看全文

相关阅读:
js对象的所有方法
 js数组的所有方法
 Scss语法
 new一个对象的过程
 promises的深入学习
 jsonp的原理介绍及Promise封装
 Vue页面缓存和不缓存的方法
 JavaScript数据类型
 JS常用函数原理的实现
 @Autowired注解在抽象类中实效的原因分析

原文地址：https://www.cnblogs.com/freeliver54/p/964265.html