在页面上动态定义节点(html控件)、拖动、以及节点连线

最新推荐文章于 2024-04-14 13:06:36 发布

VIP文章 Eddie005

最新推荐文章于 2024-04-14 13:06:36 发布

阅读量4.6k

点赞数

分类专栏： ASP.NET (1.1) 文章标签： html function textbox server asp string

本文链接：https://blog.csdn.net/Eddie005/article/details/171998

版权

情况就如在页面上画一个流程图

◆页面（draw3.aspx）
<%@ Page language="c#" Codebehind="draw3.aspx.cs" AutoEventWireup="false" Inherits="CTest.draw3" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >
<HTML>
    <HEAD>
        <title>draw</title>
        <meta content="Microsoft Visual Studio .NET 7.1" name="GENERATOR">
        <meta content="C#" name="CODE_LANGUAGE">
        <meta content="JavaScript" name="vs_defaultClientScript">
        <meta content="http://schemas.microsoft.com/intellisense/ie5" name="vs_targetSchema">
        <script language="javascript" src="jsgraphics.js" type="text/javascript"></script>
    </HEAD>
    <body MS_POSITIONING="GridLayout">
        <form id="Form1" method="post" runat="server">
            <asp:datalist id="DataList1" style="Z-INDEX: 101; LEFT: 16px; POSITION: absolute; TOP: 392px"
                runat="server" Width="80%">
                <ItemTemplate>
                    <asp:TextBox id="TextSelItem" runat="server" Width="70%"></asp:TextBox><DIV id="SelItemCoordinate" runat="server"><FONT>坐标:（</FONT>
                        <asp:TextBox id="TextSelItemX" runat="server" Width="30px">0</asp:TextBox><FONT>，</FONT>
                        <asp:TextBox id="TextSelItemY" runat="server" Width="30px">0</asp:TextBox><FONT>）</FONT></DIV>
                </ItemTemplate>
            </asp:datalist>
            <DIV id="parentdiv" style="Z-INDEX: 102; LEFT: 16px; WIDTH: 640px; POSITION: absolute; TOP: 40px; HEIGHT: 300px; BACKGROUND-COLOR: aliceblue"
                runat="server" ms_positioning="GridLayout" noWrap></DIV>
            <asp:textbox id="TextOper" style="Z-INDEX: 103; LEFT: 16px; POSITION: absolute; TOP: 8px" runat="server"
                Width="24px">1</asp:textbox>  <asp:radiobuttonlist id="RadioButtonList1" style="Z-INDEX: 104; LEFT: 16px; POSITION: absolute; TOP: 352px"
                runat="server" Width="448px" RepeatDirection="Horizontal" AutoPostBack="True">
                <asp:ListItem Value="0" Selected="True">定义节点</asp:ListItem>
                <asp:ListItem Value="1">节点位置排放</asp:ListItem>
                <asp:ListItem Value="2">节点间连线</asp:ListItem>
            </asp:radiobuttonlist><asp:button id="Button2" style="Z-INDEX: 105; LEFT: 544px; POSITION: absolute; TOP: 8px" runat="server"
                Text="JustRefresh"></asp:button>
            <asp:TextBox id="TextAnswer" style="Z-INDEX: 106; LEFT: 48px; POSITION: absolute; TOP: 8px" runat="server"
                Width="480px"></asp:TextBox><INPUT id="hidTag" style="Z-INDEX: 107; LEFT: 480px; POSITION: absolute; TOP: 352px" type="hidden"
                name="Hidden1" runat="server">
            <asp:TextBox id="TextBox1" style="Z-INDEX: 108; LEFT: 700px; POSITION: absolute; TOP: 104px"
                runat="server"></asp:TextBox></form>
        <script>
            //被拖动的对象
            var Obj=''

            var startObj="";

            //被拖动对象的最初坐标位置
            var pLeft,pTop;

   //起点坐标,终点坐标
   var startLeft,startTop,endLeft,EndTop;

            var jg = new jsGraphics("parentdiv");

            var clientWidth = document.all("parentdiv").clientWidth;
            var clientHeight = document.all("parentdiv").clientHeight;
            var clientLeft = document.all("parentdiv").style.pixelLeft;
            var clientTop = document.all("parentdiv").style.pixelTop;

            //document.all("TextBox1").value = clientWidth + "," + clientHeight + "," + clientLeft + "," + clientTop;
            //按下鼠标时
            function MDown(Object)
            {
    Obj=Object.id
                //捕获对象
                document.all(Obj).setCapture();

                //获得对象的最初坐标位置
    pLeft = document.all(Obj).style.pixelLeft;
    pTop = document.all(Obj).style.pixelTop;

    if (document.all("TextOper").value == 2)
                {
     startLeft = document.all(Obj).style.pixelLeft + 10;
     startTop = document.all(Obj).style.pixelTop + 10;
     document.all("TextOper").value = 3;
     startObj = Obj;
                }
                else if (document.all("TextOper").value == 3)
                {
     if(Obj != startObj)
     {
      endLeft = document.all(Obj).style.pixelLeft + 10;
      endTop = document.all(Obj).style.pixelTop + 10;
      document.all("TextOper").value = 2;

      jg.setColor("blue");
      jg.drawLine(startLeft,startTop,endLeft,endTop);
      jg.paint("parentdiv");
      document.all("TextAnswer").value = document.all("TextAnswer").value + startObj + "--" + Obj + " | ";
      startObj = "";
                 }
                 else
                 {
      document.all("TextOper").value = 3;
                 }
                }

                pX=event.x-document.all(Obj).style.pixelLeft;
                pY=event.y-document.all(Obj).style.pixelTop;

            }

            function MMove()
            {
                if (event.button == 1 && document.all("hidTag").value != "2")
                {
                    //对象的移动位置
                    if(Obj!='')
                    {
                        if ((event.x)< (clientWidth + clientLeft - 20) && (event.x) > (clientLeft + 20))
                        {
                         document.all(Obj).style.left=event.x-pX;
                     }

                     if ((event.y) < (clientHeight + clientTop - 10) && (event.y) > (clientTop + 20))
                     {
                         document.all(Obj).style.top=event.y-pY;
                     }
                 }
             }

            }

            function MUp()
            {
                if(Obj!='')
                {
     var index = Obj.replace("MoveDiv","");
     var txtXid = "DataList1__ctl" + index + &

最低0.47元/天解锁文章

Eddie005

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
在页面上动态定义节点(html控件)、拖动、以及节点连线

情况就如在页面上画一个流程图◆页面（draw3.aspx） draw http://schemas.microsoft.com/intellisense/ie5" name="vs_targetSchema"> r
复制链接

扫一扫