用Javascript实现鼠标拖拽网页表单

核心提示： 克隆当前的item到dragHelper中，我们可以移动带阴影效果的item.item拷贝到dragHelper后，用Javascript实现鼠标拖拽网页表单(7)，原有的item还在鼠标指针下，我们必须删除掉dragObj，确认item是不可见了．6、剩下的事就是捕捉mouseUp的事件

克隆当前的item到dragHelper中，我们可以移动带阴影效果的item.

item拷贝到dragHelper后，原有的item还在鼠标指针下，我们必须删除掉dragObj，这样脚本起作用，dragObj被包含在一个容器中．

抓取容器中所有的item当前坐标，高度/宽度，这样只需要记录一次，当item被drag时，每随mouse移动，每移钟就会记录成千上万次．

如果没有，不需要做任何事，因为这不是一个需要移动的item

5、检查curTarget，它应该包含一个被移动的item,如果存在，进行下面操作：

开始移动带有阴影的item，这个item就是前文所创建的

检查每个当前容器中的container，是否鼠标已经移动到这些范围内了

我们检查看一下正在拖动的item是属于哪个container

放置item在一个container的某一个item之前，或者整个container之后

确认item是可见的

如果鼠标不在container中，确认item是不可见了．

6、剩下的事就是捕捉mouseUp的事件了

实现一个拖动的全代码：

点击这里查看代码运行效果

你现在拥有了拖拽的所有东西．

下面的三个demo是记录事件历史．当你的鼠标在item上移动，将记录所生的事件，如果你不明白可以尝试一下鼠标的划过或者拖动，看有什么发生．

点击这里查看代码运行效果

本文出处：http://www.webreference.com/programming/javascript/mk/column2/index.html