日期:2014-05-18 浏览次数:21069 次
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default4.aspx.cs" Inherits="Default4" %>
<!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>Untitled Page</title>
<style type="text/css">
#win1{position:absolute;left:100;top:100;width:300px;height:180px;border:1px solid #000;z-index:20000;}
.face{position:absolute;top:0px;left:0px;width:1000px;height:730px;z-index:19000;filter: alpha(opacity=50);background-color:transparent!important;background-color:#eee;}
#BgDiv{position:absolute;left:240;top:100;width:240px;height:120px;border:1px solid #000;z-index:20000;}
.title{
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
color: #000080;
text-decoration: none;
letter-spacing: normal;
background-position: center;
}
</style>
<script type="text/javascript">
function test()
{
dialogBoxBG.style.display="";
BgDiv.style.display="";
}
</script>
</head>
<body onload="test()">
<form id="form1" runat="server">
<div id="dialogBoxBG" class="face">
</div>
<div style="background-color: #ffffff;" id="BgDiv">
<div class="title1" onmousedown="StartDrag(this)" onmouseup="StopDrag(this)" onmousemove="Drag(this)"
align="left" id="Div1">
添加科室
</div>
</div>
</form>
</body>
</html>
<script type="text/javascript">
var move=false;
function StartDrag(obj)
{
if(event.button==1&&event.srcElement.tagName.toUpperCase()=="DIV")
{
obj.setCapture();
obj.style.background="#999";
move=true;
}
}
function Drag(obj)
{
if(move)
{
var oldwin=obj.parentNode;
oldwin.style.left=event.clientX-100;
oldwin.style.top=event.clientY-10;
}
}
function StopDrag(obj)
{
obj.style.background="#000";
obj.releaseCapture();
move=false;
}
</script>
------解决方案--------------------
JavasScript 动态生成的DIV
自己写一个不难,但应该考虑:
浏览器的兼容性
层覆盖区域select元素的遮盖效果
不妨考虑使用 YAHOO 的 UI 库