模拟拖放的实现

时间：2007-07-08 来源：cnphper

大家好:

今天要向大家介绍的技术是网页中层的模拟拖放。拖放现在在很多博客系统中被广泛的应用在对UI调整的过程中。其实模拟拖放是一个很早就有的技术了，早在IE4的时候就已经出现了。

基本的思想是：创建一个可跟着鼠标移动的绝对定位层。

大家可能还记得在一些不太专业的网站上经常出现的鼠标跟随文字吧！其实是很容易实现的。

上面的代码运行之后，红色的层会随着鼠标指针移动。

<html>

<head>

<title></title>

<script type=”text/javascript”>

Function handleMouseMove(oEvent){

Var oDiv = document.getElementById(“div1”);

oDiv.style.left = oEvent.clientX;

oDiv.style.top = oEvent.clientY;

}

</script>

<style type=”text/css”>

#div1{

Background-color:red;

Height:100px;

Width:100px;

Position:absolute;

}

</style>

</head>

<body onmousemove=”handleMouseMove(event)”>

<p>请移动你的鼠标</p>

<p><div id=div1></div></p>

</body>

</html>

但是要实现模拟拖放，层只移动一下是完全不够的，必须能够初始化和停止拖动过程。

所以代码有些复杂。

现在我们开始完成我们模拟拖放程序：

首先，我们需要引入一个事件管理对象EventUtil对象

EventUtil是一个将各种浏览器中的事件处理函数统一的一个对象。

代码如下：