Div的层
在ajax盛行下,div层随鼠标移动,看起来也是挺爽的,研究了一些代码,其实只是js,如果只要移动的话。其实
是对div的mousemove的动态加载,动态卸载,mouseup的动态加载,动态卸载,对于某些对象的初始化,下面的
代码只是我用来实现我自己功能的一个文件,大家可以参考一下,欢迎各位评论,,给意见,
function DragDivLay(obj,tag)
{
var DivObj = null;
//////////////////////对要处理的对象进行初始化////////////////////////////
if(DragDivLay.arguments.length>0)
{
DivObj = document.all(obj);
DivObj.name = obj;
//DivObj.ZIndex = obj.style.zIndex;
DivObj.onmousedown = DragDivLay;
//document.onmouseup = DragDivLay;
document.argumentTag = tag;
}
/////////////////////////////处理鼠标事件////////////////////////////////
else
{
var EventName = event.type;
////////////////////////////////////////////////////////////////////
if(EventName=='mousedown')
{
var mouseX = event.clientX;
var mouseY = event.clientY;
document.AllTags = new Array();
var AllTagObject = document.all.tags(document.argumentTag);
document.AllTags = AllTagObject;
for(i=0;i<document.AllTags.length;i++)
{
var objLeft = document.AllTags[i].style.pixelLeft;
var objTop = document.AllTags[i].style.pixelTop;
var objWidth = document.AllTags[i].offsetWidth;
var objHeight = document.AllTags[i].offsetHeight;
var minX = objLeft;
var maxX = objLeft + objWidth;
var minY = objTop;
var maxY = objTop + objHeight;
if( mouseX > minX && mouseX < maxX && mouseY > minY && mouseY < maxY)
{
DivObj = document.AllTags[i];
break;
}
}
}
if(DivObj)
{
document.HittedTag = DivObj;
document.HittedTag.onmousemove = DragDivLay;
document.HittedTag.onmouseup = DragDivLay;
var initX = DivObj.style.pixelLeft;
var initY = DivObj.style.pixelTop;
oldX = event.clientX - initX;
oldY = event.clientY - initY;
}
/////////////////////////////////////////////////////////////////////
if(EventName=='mousemove')
{
var newLeft = event.clientX + document.body.scrollLeft;
var newTop = event.clientY + document.body.scrollTop;
newLeft = newLeft - oldX;
newTop = newTop - oldY;
document.HittedTag.style.pixelLeft = newLeft;
document.HittedTag.style.pixelTop = newTop;
}
////////////////////////////////////////////////////////////////////
if(EventName=='mouseup')
{
document.HittedTag.onmousemove = null;
document.HittedTag = null;
document.onmousemove = null;
event.returnValue = false;
}
}
}