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
#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; 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
+=
"
onmousedown='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
查看全文
相关阅读:
TCP/IP报文 三次握手 四次挥手
socket 编程
出现线程死锁的几种情况
类模板的写法
【HTTP】boundary 中一个 = 导致HTTP上传文件失败
【时间戳】 年月日 转换为时间戳
【CSV文件】CSV文件内容读取
std::string 的方法c_str() 和 data() 有什么区别
[转载] C++ STL中判断list为空,size()==0和empty()有什么区别
【SQL】glob 和 like 的区别
原文地址:https://www.cnblogs.com/hdjjun/p/1223961.html
最新文章
编译原理(一)
复选框在数据库中存储
课堂练习之mapperduce
C#学习笔记(三)
课堂练习-实验六
将用户输入的信息加密,解密
合计文件中英文单词出现次数
Hadoop学习之Mapreduce
输入法问题
对数据库的操作
热门文章
继承
python之路--day19-对象
函数复习
python之路--day18--面向对象编程--类和对象
python之路--day18--hashlib,subprocess,configparser模块
python之路--day17-shelve,xml和re模块
python之路--day16---random模块,sys模块,shutil模块
python之路--day16--time和datatime模块
python之路--day16---包
python之路--day15---软件开发目录规范
Copyright © 2011-2022 走看看