推荐:怎么用javascript进行拖拽
作者：雪山老人 来源：sohotx.com 时间：2007-09-21 20:14:00
怎么用javascript进行拖拽
本文译自：http://www.webreference.com/programming/javascript/mk/column2/index.html
所有版权归原文所有
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
};
}
运行代码框
0
投稿猜你喜欢
利用ajax制作在线翻译聊天室
getWindow与isWindow
MySQL查询优化
sqlserver合并DataTable并排除重复数据的通用方法分享
sqlserver 日期比较、日期查询常用语句：月的第一天，季度的第一天等
CSS滤镜示范(filter)附源代码(静态滤镜)
CSS+asp仿迅雷人气指数
将图片读入到Dom中，并将其存为xml文件
Oracle7.X 回滚表空间数据文件误删除处理方法
设计评论表单[译]
ASP调试方法图文教程
阿里巴巴中秋节logo设计的艰辛曲折过程
只截取ip前6位的asp代码
Ethnique公司logo设计过程和思路
将Reporting services的RDL文件拷贝到另外一台机器时报Data at the root level is invalid的解决方法
