前台代码: <% @ 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 > 后台代码: 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 } } }