网络编程
位置:首页>> 网络编程>> JavaScript>> 推荐:怎么用javascript进行拖拽

推荐:怎么用javascript进行拖拽

作者:雪山老人 来源:sohotx.com 发布时间:2007-09-21 20:14:00 

标签:拖拽,javascript

怎么用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
投稿

猜你喜欢

  • 如何在网站上提供音乐下载?为用户提供歌曲下载,一般有两种方式,一是直接通过Http,浏览器下载,二是通过ftp协议下载。我们来用Http和浏
  • 这篇论坛文章详细介绍了完全卸载MySQL数据库5.0的具体方法,更多内容请参考下文:数据库突然出了问题,没办法只能重装,因为事先并不知道My
  • 每位SQL Server开发员都有自己的首选操作方法。我的方法叫做分子查询。这些是由原子查询组合起来的查询,通过它们我可以处理一个表格。将原
  • 前段时间和哥们胡侃的时候还说腾讯抄的有水平,不过这次我溴了,腾讯房产被新浪乐居给幽默了一把。乐居:http://bj.house.sina.
  • 学习WEB标准的朋友一般都是从学习CSS开始,为什么呢?因为CSS是一种很有意思的语言,它能让我们的网页千变万化。也许我们一开始的接触只是因
  • 如何提高ASP的效率?通过修改注册表来提高asp的执行效率    改的第一个地方:HKEY_LOCAL_MAC
  • [Hack] 意为”劈”、”砍”。 [Hacker] 意为”黑客”CSS Hack 是指针对不同的浏览器写不同的CSS code的过程,简单
  • asp之家注:学习asp网页编程的朋友一定用过ACCESS数据库,access的简单方便,大大降低了asp初学者学习asp的门槛,对于学习a
  • 代码和说明如下:<%Const ForReading = 1   &nbs
  • 数据库快照是怎样工作的可以使用典型的数据库命令CREATE DATABASE语句来生成一个数据库快照,在声明中有一个源数据库快照的附加说明。
  •     在asp.net 2.0中,很多情况下,使用gridview控件的话,甚至只需要拖拉控件,设置属性就可
  • 第一招、mysql服务的启动和停止net stop mysqlnet start mysql第二招、登陆mysql语法如下: mysql -
  • 注:此处“重复”非完全重复,意为某字段数据重复HZT表结构IDintTitlenvarchar(50)AddDatedatetime数据一.
  • 用 ASP (using jscript) 在服务端创建 GUID 的代码如下:function GUID(){ ret
  • cmake-2.8.3.tar.gzmysql-5.5.8.tar.gz一,cmake-2.8.3的安装:tar -zxf cmake-2.
  • 举例: 如:在字段名处输入:username,password,email,telphone 注意:不同的字段名用英文逗号隔开,且不支持星号
  • 设置MySQL数据同步(单向&双向)由于公司的业务需求,需要网通和电信的数据同步,就做了个MySQL的双向同步,记下过程,以后用得到
  • 栅格系统的形成1692年,新登基的法国国王路易十四感到法国的印刷水平强差人意,因此命令成立一个管理印刷的皇家特别委员会。他们的首要任务是设计
  • 当我们建立一个数据库时,并且想将分散在各处的不同类型的数据库分类汇总在这个新建的数据库中时,尤其是在进行数据检验、净化和转换时,将会面临很大
  • 上次介绍了Access 导入 MSSQL 2000/2005 数据库工具,不过,在使用这个工具时还是有一些地方需要注意的,我把整个导入过程记
手机版 网络编程 asp之家 www.aspxhome.com