实现DIV的拖动效果
下面这个是js文件
var oDrag = ""; //当前正在移动的对象。
var ox, oy, nx, ny, dy, dx; //标识位置所用的变量。
/*
e为传递过来的event对象,为兼容Firefox而准备。
o为实现拖动操作的div对象(鼠标按下拖动的对象,而不是移动的对象)。
*/
function drag(e, o) {
var e = e ? e : event;
var mouseD = document.all ? 1 : 0; //判断按下的是哪个鼠标键,同样为兼容IE和火狐而准备。
if (e.button == mouseD) {
oDrag = o.parentNode; //获取外层div,设置为移动对象。
//alert(oDrag.id);
ox = e.clientX; //记录鼠标按下时的相对于屏幕左边的距离。
oy = e.clientY; //记录鼠标按下时的相对于屏幕上边的距离。
/*1*/ dx = parseInt(oDrag.style.left);//记录鼠标按下时oDrag的左边距。
/*2*/ dy = parseInt(oDrag.style.top);//记录鼠标按下时oDrag的上边距。
}
}
document.onmouseup = function() { oDrag = ""; } //鼠标放开时,设置移动对象为空。
document.onmousemove = function(event) { dragPro(event); }
/*
e为传递过来的event对象,为兼容Firefox而准备。
说实话,这个方法效率太低,每次执行都会进行多次赋值操作。而刚好这个事件正是onmousemove所调用的,所以执行次数会很多。那么相应的消耗的系统资源也就更大。
所以我把这个方法改掉了。相应的,在drag方法里面添加了1,2两行。这样,代码更简洁,效率也比之前的更高。
*/
function dragPro(e) {
if (oDrag != "") {
var e = e ? e : event;
//在原始位置的数据上,加上鼠标移动时产生的偏移量。即为oDrag现在的位置。
oDrag.style.left = dx + (e.clientX - ox);
oDrag.style.top = dy + (e.clientY - oy);
}
}
这个是页面调用处,红色标记
<div id="divZc" style="position:absolute; width:497px; vertical-align:middle; top:97px;
left:120px; display:none; background-color:lightblue; vertical-align:middle; height: 281px;
border-right: #0000cc 2px solid; border-top: #0000cc 2px solid; border-left: #0000cc 2px solid;
border-bottom: #0000cc 2px solid;" onmousedown="drag(event,this)">
<input id="Button1" type="button" value="confirm" onclick="closeWin1()"/>
<br />
<MWG:MWGrid ID="gridworkpage" runat="server">
<Columns>
<asp:TemplateField>
<HeaderStyle Width="10%" />
<ItemTemplate>
<input id="Checkbox1" type="checkbox" />
</ItemTemplate>
</asp:TemplateField>
<asp:BoundField DataField="WPID" HeaderText="WorkpageNo." ItemStyle-Width ="20%"/>
<asp:BoundField DataField="WPname" HeaderText="WorkpageName." ItemStyle-Width ="20%" />
</Columns>
</MWG:MWGrid> </div>
不知道为什么鼠标移动一直报invalid argument 这个错误,然后就定位到出错的这一行document.onmousemove = function(event) { dragPro(event); },发现里面的event 为null,不知道该如何修改了,谢谢大虾们帮忙了....