首页导航栏 - 网络工程 | 网站建设 | 设计在线 | 精彩图片 | 职业前线 | 创业之路 | 启步工具 | 教程资讯 | 休闲娱乐
启步网 > 网站建设 > 网站编程
怎么用javascript进行拖拽
作者: 不详 阅读: 来源:蓝色理想 时间:2007-1-28 20:13:38
字体

本文译自:How to Drag and Drop in JavaScript

所有版权归原文所有

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
 };
}

运行代码框
 

[1] [2] [3] [4] [5] 下一页

责任编辑:一路狂奔
帐号:
密码:

Google
Google提供的相关资源
参与评论(条评论)
请遵守国家法律
笔名:
邮箱:
( 以上评论仅代表网友个人意见,不代表本站观点 )
相关资源
  • Web页面托拽 JavaScript Drag Demo 实例 [2007-1-28]
  • JavaScript Google IG Drag Demo [2007-1-28]
  • GOOGLE个性主页-页面元素拖拽实例系列(二) [2007-1-28]
  • Web页面元素拖拽实例系列—专题篇 [2007-1-28]
  • GOOGLE个性主页-页面元素拖拽实例系列(一) [2007-1-28]
  • 类似Google个性化主页,实现Web桌面托拽的实例 [2007-1-28]
  • 千万数量级分页存储过程实例 [2007-1-28]
  • 自己开发的自定义分页控件 [2007-1-28]
  • JS+ASP打造无刷新新闻列表 [2007-1-26]
  • 适合网站设计的运行代码功能 [2007-1-24]
  •