酷！网页内容位置任意调
技术与开发
我是一名“网虫”，喜欢没事都泡在网络上。最近我在一家网站上逛时，无意中拖动了网页内容，可以想怎么放就怎么放。这个新鲜的功能我以前没有碰到过，我很感兴趣，不知道这个功能是怎么设计的？
要实现这个功能很简单，我们仅仅依靠Javascript事件处理机制就可以将其完成：在Javascript中编写一个方法用来捕捉用户移动的数据，即图片的横坐标值和纵坐标值，当图片停止移动时，将当前的坐标值赋予图片。这样图片就定位在新的位置。Javascript事件处理机制可以判断或控制页面所有元素，通过程序来控制相关页面元素的显示或移位。
小知识：Javascript是基于对象（object-based）的语言。通常鼠标或热键的动作我们称之为事件（Event），而由鼠标或热键引发的一连串程序的动作，称之为事件驱动（Event Driver）。而对事件进行处理的程序或函数，我们称之为事件处理程序（Event Handler）。
第一步：打开 Macromedia Dreamwea ver 8后，执行“文件→新建→基本页”命令， 然后单击“创建”按钮即可创建一个HTML页面。
第二步：在新建的HTML页面中，添加Javascript代码（完整代码请到http://www.cpcw.com/bzsoft下载），其中关键代码如下所示：
＜script language="javascript"＞
＜！--
var ie=document.all;
var nn6=document.getElementById&&!document.all;
var isdrag=false;
var y,x;
var oDragObj;
function moveMouse(e) {
if (isdrag) {
oDragObj.style.top = (nn6? nTY+e.clientY-y:nTY+event.clientY-y)+"px";
oDragObj.style.left= (nn6? nTX+e.clientX-x:nTX+event.clientX-x)+"px";
return false;
}
}
function initDrag(e) {
var oDragHandle = nn6? e.target:event.srcElement;
var topElement = "HTML";
while (oDragHandle.tagName!= topElement && oDragHandle.className!= "dragAble") {
oDragHandle = nn6? oDragHandle.parentNode:oDragHandle.parentElement;
}
if (oDragHandle.className=="dragAble") {
isdrag = true;
oDragObj = oDragHandle;
nTY=parseInt(oDragObj.style.top+0);
y=nn6? e.clientY:event.clientY;
nTX = parseInt(oDragObj.style.left+0);
x = nn6 ? e.clientX : event.clientX;
document.onmousemove=moveMouse;
return false;
}
}
document.onmousedown=initDrag;
document.onmouseup=new Function("isdrag=false");
//--＞
＜/script＞
＜/head＞
＜body＞
＜img src="12.jpg" class="dragAble" width="240" heigh="210" /＞
＜img src="18.jpg" class="dragAble" width="240" heigh="210" /＞
＜img src="16.jpg" class="dragAble" width="240" heigh="210" /＞
＜br /＞
＜div
style="border: 1px solid #ff6d00; width: 240px; padding: 5px 0; background-image: url(11.jpg); height: 210px;"class="dragAble"＞＜/div＞
＜/body＞
＜/html＞
第三步：按键盘上的F12键，就可以运行HTML页面并获得效果图了。
总结
通过本例的学习，读者朋友可以更好地理解Javascript事件处理机制的实际运用，在工作中应用Javascript事件处理机制，例如鼠标的单击或双击事件、载入或卸载文件的事件等，可以使网页元素功能更强大，交互动作更优美。结合Ajax可以实现日程表、许愿墙等流行的网络应用效果。