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

核心提示：Javascript的特点是dom的处理与网页效果，大多数情况我们只用到了这个语言的最简单的功能，用Javascript实现鼠标拖拽网页表单，比如制作图片轮播/网页的tab等等，这篇文章将向你展示如何在自己的网页上制作拖拽．有很多理由让你的网站加入拖拽功能，会被存储在window.event里． 在firefox中，或

Javascript的特点是dom的处理与网页效果，大多数情况我们只用到了这个语言的最简单的功能，比如制作图片轮播/网页的tab等等，这篇文章将向你展示如何在自己的网页上制作拖拽．

有很多理由让你的网站加入拖拽功能，最简单的一个是数据重组．例如：你有一个序列的内容让用户排序，用户需要给每个条目进行输入或者用select选择，替代前面这个方法的就是拖拽．或许你的网站也需要一个用户可以拖动的导航窗口！那么这些效果都是很简单：因为你可以很容易的实现！

网页上实现拖拽其实也不是很复杂．第一你需要知道鼠标坐标，第二你需要知道用户鼠标点击一个网页元素并实现拖拽，最后我们要实现移动这个元素。

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

获取鼠标移动信息

第一我们需要获取鼠标的坐标．我们加一个用户函数到document.onmousemove就可以了:

document.onmousemove = mouseMove;
function mouseMove(ev){
ev　　　　　 = ev || window.event;
var mousePos = mouseCoords(ev);
}
function mouseCoords(ev){
if(ev.pageX || ev.pageY){
　return {x:ev.pageX, y:ev.pageY};
}
return {
　x:ev.clientX + document.body.scrollLeft - document.body.clientLeft,
　y:ev.clientY + document.body.scrollTop　- document.body.clientTop
};
}

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

你首先要声明一个evnet对象．不论何时你移动鼠标／点击／按键等等，会对应一个event的事件．在Internet Explorer里event是全局变量，会被存储在window.event里． 在firefox中，或者其他浏览器，event事件会被相应的自定义函数获取．当我们将mouseMove函数赋值于document.onmousemove，mouseMove会获取鼠标移动事件．