推荐:怎么用javascript进行拖拽(2)
作者:雪山老人 来源:sohotx.com 发布时间:2007-09-21 20:14:00
你首先要声明一个evnet对象.不论何时你移动鼠标/点击/按键等等,会对应一个event的事件.在Internet Explorer里event是全局变量,会被存储在window.event里. 在firefox中,或者其他浏览器,event事件会被相应的自定义函数获取.当我们将mouseMove函数赋值于document.onmousemove,mouseMove会获取鼠标移动事件.
(ev = ev || window.event) 这样让ev在所有浏览器下获取了event事件,在Firefox下"||window.event"将不起作用,因为ev已经有了赋值.在MSIE下ev是空的,所以ev将设置为window.event.
因为我们在这篇文章中需要多次获取鼠标坐标,所以我们设计了mouseCoords这个函数,它只包含了一个参数,就是the event.
我们需要运行在MSIE与Firefox为首的其他浏览器下.Firefox以event.pageX和event.pageY来代表鼠标相应于文档左上角的位置.如果你有一个500*500的窗口,而且你的鼠标在正中间,那么paegX和pageY将是250,当你将页面往下滚动500px,那么pageY将是750.此时pageX不变,还是250.
MSIE和这个相反,MSIE将event.clientX与event.clientY来代表鼠标与ie窗口的位置,并不是文档.当我们有一个500*500的窗口,鼠标在正中间,那么clientX与clientY也是250,如果你垂直滚动窗口到任何位置,clientY仍然是250,因为相对ie窗口并没有变化.想得到正确的结果,我们必须加入scrollLeft与scrollTop这两个相对于文档鼠标位置的属性.最后,由于MSIE并没有0,0的文档起始位置,因为通常会设置2px的边框在周围,边框的宽度包含在document.body.clientLeft与clientTop这两个属性中,我们再加入这些到鼠标的位置中.
很幸运,这样mouseCoords函数就完成了,我们不再为坐标的事操心了.
捕捉鼠标点击
下次我们将知道鼠标何时点击与何时放开.如果我们跳过这一步,我们在做拖拽时将永远不知道鼠标移动上面时的动作,这将是恼人的与违反直觉的.
这里有两个函数帮助我们:onmousedown与onmouseup.我们预先设置函数来接收document.onmousemove,这样看起来很象我们会获取document.onmousedown与document.onmouseup.但是当我们获取document.onmousedown时,我们同时获取了任何对象的点击属性如:text,images,tables等等.我们只想获取那些需要拖拽的属性,所以我们设置函数来获取我们需要移动的对象.
运行代码框
猜你喜欢
- 前一段时间碰到这样的的问题,Ajax从后台得到的中文信息怎么都是空。后来到网上搜资料,大多是以下这样。用AJAX来GET回一个页面时,RES
- EXEC SQL WHENEVER SQLERROR CONTINUE; sqlglm(msg_buffer, &buf
- domainname.asp<form method="POST"> &nb
- 下面是BeforeInitialBind事件过程:<SCRIPT language=vbscript event=
- 现在主流的cms或者blog等系统中,都内置的有插件系统,但是层层深入、剖析实现的方式,其实都是最简单的钩子的复杂化的实现。前言钩子是插件执
- 当需要制作转动鼠标滚轮放大页面字体这样的交互效果时,会用到 Mousewheel 事件。其实在大多数浏览器(IE6, IE7, IE8, O
- 概 述 现在有不少介绍利用ASP实现动态分页的文章,方法大同小异,就是每次利用ADO返回原始数据满足条件记录集中的指定
- 共4个页面:form.asp; chk.asp; num.asp; count.asp,得到一个随即数字。加密解密后成成XBM图片,利用 s
- CSS是众所周知且应用广泛的网站样式语言,在它的版本三(CSS3)计划中,新增了一些能够节省时间的特性。尽管只有当前最新了浏览器
- 学习目的 接触验证控件 昨天介绍了SQL SERVER插入数据,但是我们省略了验证输入这一步。以前的做法是用语句逐个判断输入的正确性,如是否
- 从接触互联网开始,一直在关注每个网站页面浏览速度,不管大小国内外网站,而且每个用户的浏览时间都不一样,从而了解用户在浏览页面上时间体验尺度的
- 分区视图联接来自一组成员的水平分区数据,使数据看起来象来自同一张表。SQL Server 2000 区分本地分区视图和分布式分区视图。在本地
- 前面也讲过一次phar文件上传的东西,但是那都是过滤比较低,仅仅过滤了后缀。知道今天看到了一篇好的文章如果过滤了phar这个伪造协议的话,那
- 1. 不使用全局变量,适当封装2. 兼容性还行~~3. 代码短,可读性凑合~~呵呵~~~~~a. 拖动效果,16行JS<!DOCTYP
- 酝酿了将近一个春夏秋冬的腾讯网首页终于亮剑!反响热烈!让我们来分享它成功背后的酸甜苦辣吧。腾讯网首页改版终于开花结果。于2008年3月25日
- 大名鼎鼎的FCKeditor终于在最近发布新版本了,与增加版本号不同,这次完全把它改名了,更名为CKeditor。这应该是和它的开发公司CK
- 对于 link 元素 和 style 元素 我相信大家都比较了解,但对于他们的出现位置可能有误解。在 淘宝 的所有频道中出现这样一个问题:频
- 以国内最流行ASP为例,我不知道有多少人会在写代码时想到“容错”这个概念,实际上当我遇到这种事时,也是不了了之。为什么呢,想想最初的意思是认
- 当然有,看看下面,你就会明白:<%Sub TimeDelaySeconds(Delay
- 如果MySQL服务器启用了二进制日志,你可以使用mysqlbinlog工具来恢复从指定的时间点开始 (例如,从你最后一次备份)直到现在或另一