随着网络的发展，人们越来越不满足静态的网页，所以DHTML流行起来了。一时间，网上的各种主页特效也突然多了起来，像跟随光标的物体、飞舞的文字等。这次我们介绍一个可任意拖动的层。
现在IE浏览器仍然不支持〈LAYER〉标记，但是我们却可以通过〈DIV〉来创建两种浏览器能识别的层。对于层我们就说这么多，只要你理解它是一个可以叠加在其他HTML元素上的一个容器，在其中可以插入任何合法的HTML标记如一个表格、图片等内容。
我们知道，主页中插入的物件位置一般都是固定的，用户浏览的时候不能对页面元素的位置进行操作。不过在JavaScript应用广泛的今天，我们可以用光标把它拖动到我们想要它出现的位置，在不想看到它的时候我们甚至可以用一个 Show－Hide Layer 将其隐藏。
下面给出整个程序代码：
〈html〉
〈head〉
〈title〉ONLY′S aBoUt DeSiGn〈/title〉
〈meta http－equiv=″Content－Type″ content=″text/html; charset=UTF-8″〉
〈/head〉
〈body bgcolor=″＃FFFFFF″〉
〈script language=″JavaScript″〉
〈!－－
IE4 = (document.all) ? 1 : 0;
NS4 = (document.layers) ? 1 : 0;
ver4 = (IE4 || NS4) ? 1 : 0;
currentX = currentY = 0;
whichEl = null;
function grabEl(e) {
if (IE4) {
whichEl=event.srcElement;
while (whichEl.id.indexOf(″KBDRAG″) == －1) {
whichEl=whichEl.parentElement;
if (whichEl == null) {
return
} } }
else { mouseX = e.pageX;
mouseY = e.pageY;
for ( i=0; i〈document.layers.length; i＋＋ ) {
tempLayer = document.layers[i];
if ( tempLayer.id.indexOf(″KBDRAG″) == －1 ) { continue
}
if ( (mouseX 〉 tempLayer.left) ＆＆ (mouseX 〈 (tempLayer.left
＋ tempLayer.clip.width)) ＆＆ (mouseY 〉 tempLayer.top) ＆＆ (mouseY
〈 (tempLayer.top ＋ tempLayer.clip.height)) ) { whichEl = tempLayer;
} }
if (whichEl == null) {
return } }
if (whichEl != activeEl) {
if (IE4) { }
else {
whichEl.moveAbove(activeEl) };
activeEl = whichEl; }
if (IE4) {
whichEl.style.pixelLeft = whichEl.offsetLeft;
whichEl.style.pixelTop = whichEl.offsetTop;
currentX = (event.clientX ＋ document.body.scrollLeft);
currentY = (event.clientY ＋ document.body.scrollTop); }
else {
currentX = e.pageX;
currentY = e.pageY;
document.captureEvents(Event.MOUSEMOVE);
document.onmousemove=moveEl; }}
function moveEl(e) {
if (whichEl == null) {
return };
if (IE4) {
newX = (event.clientX ＋ document.body.scrollLeft);
newY = (event.clientY ＋ document.body.scrollTop); }
else {
newX = e.pageX;
newY = e.pageY; }
distanceX = (newX － currentX);
distanceY = (newY － currentY);
currentX = newX;
currentY = newY;
if (IE4) {
whichEl.style.pixelLeft ＋=distanceX;
whichEl.style.pixelTop ＋=distanceY;
event.returnValue = false; }
else {
whichEl.moveBy(distanceX,distanceY) } }
function checkEl() {
if (whichEl!=null) {
return false } }
function dropEl() {
if (NS4) {
document.releaseEvents(Event.MOUSEMOVE) }
whichEl = null; }
function cursEl() {
if (event.srcElement.id.indexOf(″KBDRAG″) != －1) {
event.srcElement.style.cursor = ″move″ } }
if (ver4) {
if (NS4) {
document.captureEvents(Event.MOUSEDOWN | Event.MOUSEUP);
activeEl = document.dropKBDRAG; }
else {
document.onmousemove = moveEl;
document.onselectstart = checkEl;
document.onmouseover = cursEl;
activeEl = document.all.dropKBDRAG; }
document.onmousedown = grabEl;
document.onmouseup = dropEl; }
//－－〉
〈/script〉
〈div id=′dropKBDRAG′ style=′position:absolute; left:50; top:50;
width:50; height:50; background－color: ＃0000FF; layer－background－color:
＃0000FF; border: 1px none ＃000000′〉〈/div〉
〈/body〉
〈/html〉
将其另行保存为＊.htm 或 ＊.html 就可以，〈Script〉部分不能做任何改动。对于〈DIV〉我们可以做任意的修改和调整，或者在其中插入一些主页元素。只要注意 id=′dropKBDRAG′部分不要弄错！
这样，你就可以像在Windows桌面拖动一个窗口一样拖动你主页中这个层了！
摘自《赛迪网》 王超/文 