请教如何让html控件在web页面拖动？急需

给个例子，动态定义节点、拖动位置、节点间连线
<%@ 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 + "_TextSelItemX";
var txtYid = "DataList1__ctl" + index + "_TextSelItemY";
document.all[txtXid].value = document.all(Obj).style.pixelLeft;
document.all[txtYid].value = document.all(Obj).style.pixelTop;
                    //释放对象

                document.all(Obj).releaseCapture();
                if (document.all("TextOper").value != 1)
                {
                    //还原到最初按下鼠标时的位置
                    document.all(Obj).style.pixelLeft = pLeft;
                    document.all(Obj).style.pixelTop = pTop;
                    }
                Obj='';
            }            }

            document.onmouseup=MUp;
            document.onmousemove=MMove;

            function CancelContextMenu()
            {
                event.cancelBubble = true;
                event.returnValue = false;
            }
            document.oncontextmenu = CancelContextMenu;
        </script>
    </body>
</HTML>

using System;
using System.Collections;
using System.ComponentModel;
using System.Data;
using System.Drawing;
using System.Web;
using System.Web.SessionState;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.HtmlControls;namespace CTest
{
/// <summary>
/// draw 的摘要说明。
/// </summary>
public class draw3 : System.Web.UI.Page
{
protected System.Web.UI.HtmlControls.HtmlGenericControl parentdiv;
protected System.Web.UI.WebControls.RadioButtonList RadioButtonList1;
protected System.Web.UI.WebControls.Button Button2;
protected System.Web.UI.WebControls.TextBox TextOper;
protected System.Web.UI.WebControls.TextBox TextAnswer;
        protected System.Web.UI.HtmlControls.HtmlInputHidden hidTag;
        protected System.Web.UI.WebControls.TextBox TextBox1;
        protected System.Web.UI.WebControls.DataList DataList1;

private void Page_Load(object sender, System.EventArgs e)
{
// 在此处放置用户代码以初始化页面
            if (!IsPostBack)
            {
                this.AddDiv(6);

            }
} #region Web 窗体设计器生成的代码
override protected void OnInit(EventArgs e)
{
//
// CODEGEN: 该调用是 ASP.NET Web 窗体设计器所必需的。
//
InitializeComponent();
base.OnInit(e); }

/// <summary>
/// 设计器支持所需的方法 - 不要使用代码编辑器修改
/// 此方法的内容。
/// </summary>
private void InitializeComponent()
{
            this.DataList1.ItemDataBound += new System.Web.UI.WebControls.DataListItemEventHandler(this.DataList1_ItemDataBound);
            this.RadioButtonList1.SelectedIndexChanged += new System.EventHandler(this.RadioButtonList1_SelectedIndexChanged);
            this.Button2.Click += new System.EventHandler(this.Button2_Click);
            this.Load += new System.EventHandler(this.Page_Load);        }
#endregion        private void AddDiv(int n)
        {
            string [] strAry = new string[n];
            DataList1.DataSource = strAry;
            DataList1.DataBind();
        }
private void DataList1_ItemDataBound(object sender, DataListItemEventArgs e)
{
TextBox txt = new TextBox();
HtmlGenericControl div = new HtmlGenericControl(); txt=(TextBox)e.Item.Controls[2].Controls[1];
txt.Text = "10"; txt=(TextBox)e.Item.Controls[2].Controls[3];
txt.Text = (10 + 30*e.Item.ItemIndex).ToString(); div = (HtmlGenericControl)e.Item.Controls[2];
div.Style.Add("display","none");
}
private void RadioButtonList1_SelectedIndexChanged(object sender, System.EventArgs e)
{

switch(RadioButtonList1.SelectedIndex)
{
case 0:
this.DataList1.Style.Add("display","inline");
this.TextOper.Text = "1";
break;
case 1:
this.DataList1.Style.Add("display","inline");
this.TextOper.Text = "1";
                    this.hidTag.Value = "1";
break;
case 2:
this.DataList1.Style.Add("display","none");
this.TextOper.Text = "2";
                    this.hidTag.Value = "2";
break;
}
showSelItems();
}

private void showSelItems()
{
string html = "";
string txtValue ="";
string txtX = "";
string txtY = "";
TextBox txt = new TextBox();
HtmlGenericControl div = new HtmlGenericControl(); for(int i=0;i<DataList1.Items.Count;i++)
{
txt=(TextBox)DataList1.Items[i].Controls[2].Controls[1];
txtX = txt.Text.Trim(); txt=(TextBox)DataList1.Items[i].Controls[2].Controls[3];
txtY = txt.Text.Trim(); txt=(TextBox)DataList1.Items[i].Controls[1];
txtValue = txt.Text.TrimStart().TrimEnd();

if(txtValue.Length>0)
html += "<DIV onmousedown='MDown(this)' id='MoveDiv"+ i.ToString() +"' style='Z-INDEX: 105; LEFT: " + txtX + "px; CURSOR: hand; POSITION: absolute; TOP: "+ txtY +"px; BORDER-RIGHT: darkgreen 3px double; BORDER-TOP: darkgreen 3px double; BORDER-LEFT: darkgreen 3px double; BORDER-BOTTOM: darkgreen 3px double; BACKGROUND-COLOR: FloralWhite' ms_positioning='FlowLayout' > "+txtValue+" </DIV>";
else if(this.RadioButtonList1.SelectedIndex>0)
txt.Visible = false;
else
txt.Visible = true;

div = (HtmlGenericControl)DataList1.Items[i].Controls[2];
if(this.RadioButtonList1.SelectedIndex>0 && txtValue.Length>0)
div.Style.Add("display","inline");
else
div.Style.Add("display","none");
}
this.parentdiv.InnerHtml =html;
} private void Button2_Click(object sender, System.EventArgs e)
{

}
}
}

其中引用了一个脚本文件var jg_ihtm, jg_ie, jg_fast, jg_dom, jg_moz,
jg_n4 = (document.layers && typeof document.classes != "undefined");
function chkDHTM(x, i)
{
x = document.body || null;
jg_ie = x && typeof x.insertAdjacentHTML != "undefined";
jg_dom = (x && !jg_ie &&
typeof x.appendChild != "undefined" &&
typeof document.createRange != "undefined" &&
typeof (i = document.createRange()).setStartBefore != "undefined" &&
typeof i.createContextualFragment != "undefined");
jg_ihtm = !jg_ie && !jg_dom && x && typeof x.innerHTML != "undefined";
jg_fast = jg_ie && document.all && !window.opera;
jg_moz = jg_dom && typeof x.style.MozOpacity != "undefined";
}
function pntDoc()
{
this.wnd.document.write(jg_fast? this.htmRpc() : this.htm);
this.htm = '';
}
function pntCnvDom()
{
var x = document.createRange();
x.setStartBefore(this.cnv);
x = x.createContextualFragment(jg_fast? this.htmRpc() : this.htm);
this.cnv.appendChild(x);
this.htm = '';
}
function pntCnvIe()
{
this.cnv.insertAdjacentHTML("BeforeEnd", jg_fast? this.htmRpc() : this.htm);
this.htm = '';
}
function pntCnvIhtm()
{
this.cnv.innerHTML += this.htm;
this.htm = '';
}
function pntCnv()
{
this.htm = '';
}
function mkDiv(x, y, w, h)
{
this.htm += '<div style="position:absolute;'+
'left:' + x + 'px;'+
'top:' + y + 'px;'+
'width:' + w + 'px;'+
'height:' + h + 'px;'+
'clip:rect(0,'+w+'px,'+h+'px,0);'+
'background-color:' + this.color +
(!jg_moz? ';overflow:hidden' : '')+
';"><\/div>';
}
function mkDivIe(x, y, w, h)
{
this.htm += '%%'+this.color+';'+x+';'+y+';'+w+';'+h+';';
}
function mkDivPrt(x, y, w, h)
{
this.htm += '<div style="position:absolute;'+
'border-left:' + w + 'px solid ' + this.color + ';'+
'left:' + x + 'px;'+
'top:' + y + 'px;'+
'width:0px;'+
'height:' + h + 'px;'+
'clip:rect(0,'+w+'px,'+h+'px,0);'+
'background-color:' + this.color +
(!jg_moz? ';overflow:hidden' : '')+
';"><\/div>';
}
function mkLyr(x, y, w, h)
{
this.htm += '<layer '+
'left="' + x + '" '+
'top="' + y + '" '+
'width="' + w + '" '+
'height="' + h + '" '+
'bgcolor="' + this.color + '"><\/layer>\n';
}
var regex = /%%([^;]+);([^;]+);([^;]+);([^;]+);([^;]+);/g;
function htmRpc()
{
return this.htm.replace(
regex,
'<div style="overflow:hidden;position:absolute;background-color:'+
'$1;left:$2;top:$3;width:$4;height:$5"></div>\n');
}
function htmPrtRpc()
{
return this.htm.replace(
regex,
'<div style="overflow:hidden;position:absolute;background-color:'+
'$1;left:$2;top:$3;width:$4;height:$5;border-left:$4px solid $1"></div>\n');
}
function mkLin(x1, y1, x2, y2)
{
if (x1 > x2)
{
var _x2 = x2;
var _y2 = y2;
x2 = x1;
y2 = y1;
x1 = _x2;
y1 = _y2;
}
var dx = x2-x1, dy = Math.abs(y2-y1),
x = x1, y = y1,
yIncr = (y1 > y2)? -1 : 1; if (dx >= dy)
{
var pr = dy<<1,
pru = pr - (dx<<1),
p = pr-dx,
ox = x;
while ((dx--) > 0)
{
++x;
if (p > 0)
{
this.mkDiv(ox, y, x-ox, 1);
y += yIncr;
p += pru;
ox = x;
}
else p += pr;
}
this.mkDiv(ox, y, x2-ox+1, 1);
} else
{
var pr = dx<<1,
pru = pr - (dy<<1),
p = pr-dy,
oy = y;
if (y2 <= y1)
{
while ((dy--) > 0)
{
if (p > 0)
{
this.mkDiv(x++, y, 1, oy-y+1);
y += yIncr;
p += pru;
oy = y;
}
else
{
y += yIncr;
p += pr;
}
}
this.mkDiv(x2, y2, 1, oy-y2+1);
}
else
{
while ((dy--) > 0)
{
y += yIncr;
if (p > 0)
{
this.mkDiv(x++, oy, 1, y-oy);
p += pru;
oy = y;
}
else p += pr;
}
this.mkDiv(x2, oy, 1, y2-oy+1);
}
}
}
function mkLin2D(x1, y1, x2, y2)
{
if (x1 > x2)
{
var _x2 = x2;
var _y2 = y2;
x2 = x1;
y2 = y1;
x1 = _x2;
y1 = _y2;
}
var dx = x2-x1, dy = Math.abs(y2-y1),
x = x1, y = y1,
yIncr = (y1 > y2)? -1 : 1; var s = this.stroke;
if (dx >= dy)
{
if (s-3 > 0)
{
var _s = (s*dx*Math.sqrt(1+dy*dy/(dx*dx))-dx-(s>>1)*dy) / dx;
_s = (!(s-4)? Math.ceil(_s) : Math.round(_s)) + 1;
}
else var _s = s;
var ad = Math.ceil(s/2); var pr = dy<<1,
pru = pr - (dx<<1),
p = pr-dx,
ox = x;
while ((dx--) > 0)
{
++x;
if (p > 0)
{
this.mkDiv(ox, y, x-ox+ad, _s);
y += yIncr;
p += pru;
ox = x;
}
else p += pr;
}
this.mkDiv(ox, y, x2-ox+ad+1, _s);
} else
{
if (s-3 > 0)
{
var _s = (s*dy*Math.sqrt(1+dx*dx/(dy*dy))-(s>>1)*dx-dy) / dy;
_s = (!(s-4)? Math.ceil(_s) : Math.round(_s)) + 1;
}
else var _s = s;
var ad = Math.round(s/2); var pr = dx<<1,
pru = pr - (dy<<1),
p = pr-dy,
oy = y;
if (y2 <= y1)
{
++ad;
while ((dy--) > 0)
{
if (p > 0)
{
this.mkDiv(x++, y, _s, oy-y+ad);
y += yIncr;
p += pru;
oy = y;
}
else
{
y += yIncr;
p += pr;
}
}
this.mkDiv(x2, y2, _s, oy-y2+ad);
}
else
{
while ((dy--) > 0)
{
y += yIncr;
if (p > 0)
{
this.mkDiv(x++, oy, _s, y-oy+ad);
p += pru;
oy = y;
}
else p += pr;
}
this.mkDiv(x2, oy, _s, y2-oy+ad+1);
}
}
}
function mkLinDott(x1, y1, x2, y2)
{
if (x1 > x2)
{
var _x2 = x2;
var _y2 = y2;
x2 = x1;
y2 = y1;
x1 = _x2;
y1 = _y2;
}
var dx = x2-x1, dy = Math.abs(y2-y1),
x = x1, y = y1,
yIncr = (y1 > y2)? -1 : 1,
drw = true;
if (dx >= dy)
{
var pr = dy<<1,
pru = pr - (dx<<1),
p = pr-dx;
while ((dx--) > 0)
{
if (drw) this.mkDiv(x, y, 1, 1);
drw = !drw;
if (p > 0)
{
y += yIncr;
p += pru;
}
else p += pr;
++x;
}
if (drw) this.mkDiv(x, y, 1, 1);
} else
{
var pr = dx<<1,
pru = pr - (dy<<1),
p = pr-dy;
while ((dy--) > 0)
{
if (drw) this.mkDiv(x, y, 1, 1);
drw = !drw;
y += yIncr;
if (p > 0)
{
++x;
p += pru;
}
else p += pr;
}
if (drw) this.mkDiv(x, y, 1, 1);
}
}
function mkOv(left, top, width, height)
{
var a = width>>1, b = height>>1,
wod = width&1, hod = (height&1)+1,
cx = left+a, cy = top+b,
x = 0, y = b,
ox = 0, oy = b,
aa = (a*a)<<1, bb = (b*b)<<1,
st = (aa>>1)*(1-(b<<1)) + bb,
tt = (bb>>1) - aa*((b<<1)-1),
w, h;
while (y > 0)
{
if (st < 0)
{
st += bb*((x<<1)+3);
tt += (bb<<1)*(++x);
}
else if (tt < 0)
{
st += bb*((x<<1)+3) - (aa<<1)*(y-1);
tt += (bb<<1)*(++x) - aa*(((y--)<<1)-3);
w = x-ox;
h = oy-y;
if (w&2 && h&2)
{
this.mkOvQds(cx, cy, -x+2, ox+wod, -oy, oy-1+hod, 1, 1);
this.mkOvQds(cx, cy, -x+1, x-1+wod, -y-1, y+hod, 1, 1);
}
else this.mkOvQds(cx, cy, -x+1, ox+wod, -oy, oy-h+hod, w, h);
ox = x;
oy = y;
}
else
{
tt -= aa*((y<<1)-3);
st -= (aa<<1)*(--y);
}
}
this.mkDiv(cx-a, cy-oy, a-ox+1, (oy<<1)+hod);
this.mkDiv(cx+ox+wod, cy-oy, a-ox+1, (oy<<1)+hod);
}

csdn不厚道！！
其他技术论坛专门有一个TEXTARA存放代码，看起来也比较清晰

有
http://blog.csdn.net/eddie005

to:Eddie005(暴走005) ,首先谢谢你的代码,不知道你有没有用过office-infopath 2003,我要的就是那种效果,在页面上可以像net设计环境一样设计表单.

调试易

请教如何让html控件在web页面拖动？急需

解决方案 »