实现拖放功能的javascirpt代码

最新推荐文章于 2023-07-07 15:04:25 发布

最新推荐文章于 2023-07-07 15:04:25 发布 · 81 阅读

文章标签：

#javascript #ViewUI

本文展示了一个使用VBScript和JavaScript实现的简单ASPX页面示例，该页面包含一个可以拖动的标签元素和一个表格。通过客户端和服务端脚本结合的方式实现了元素的拖放功能。

存为aspx文件试试效果

<%@ Page Language="VB" ContentType="text/html" ResponseEncoding="gb2312" %>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>Test Document</title>
<script language="vb" runat="server">
sub page_load(sender as object,e as eventargs)
label1.attributes.cssstyle("position")="absolute"
label1.attributes("onmousedown")="moveit(this)"
end sub
</script>
<script language="javascript">
function moveit(obj){
obj.setCapture();
var xx=event.offsetX,yy=event.offsetY;
function obj.onmousemove(){
if (obj){
obj.style.left=event.x-xx;
obj.style.top=event.y-yy;
}
}
function obj.onmouseup(){obj.releaseCapture();obj=false;}

}
</script>
<style>
td,span{text-align:center;font-size:9pt}
</style>
</head>
<body>
<asp:label ID="label1" runat="server" text="标题" BackColor="#9999CC" Width="50%" Height="30"/>
<br/>
<br/>
<table border="1" width="50%">
<tr>
<td>表格内容</td>
</tr>
</table>
</body>
</html>