前台代码:
<%
@ 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 >
<! 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
}
}
}
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
}
}
}
TrackBack:http://www.cnblogs.com/freeliver54/archive/2007/11/19/964265.html