首页导航栏 - 网络工程 | 网站建设 | 设计在线 | 精彩图片 | 职业前线 | 创业之路 | 启步工具 | 教程资讯 | 休闲娱乐
启步网 > 网站建设 > 网站编程
GOOGLE个性主页-页面元素拖拽实例系列(二)
作者: 周飞 阅读: 来源:启步网 时间:2007-1-28 19:37:18
字体

    在上一篇文章GOOGLE个性主页-页面元素拖拽实例系列(一)中所用的方法基本上实现 MicroSoft Live 和GOOGLE个性主页 类似页面元素可拖拽放置的功能,但是你也许会发现一个问题,鼠标不在可拖动的层之内,而是在与拖动层的相对位置的0,0坐标上,这样当鼠标经过未被拖动的层的时候才能触发这些层的onmouseover事件。如果你为拖动对象设置一个偏移值就可以将鼠标放置到已拖动层内的位置,但是这样就出现一个更严重的问题,未被拖动的那些层的onmouseover事件触发不了了,这样就也无法进行放置动作和放置位置的预览显示。

    解决方法:
 
    当鼠标在一个层内时是不能触发另一个层(在这里是下面的层)的任何鼠标事件的,所以这时候必须抛弃onmouseover事件,我们需要通过对鼠标坐标和未被拖动的层的坐标及范围做判断,判断鼠标是否经过某个层。然后再处理相应的事情,但是这里又出现一个问题,判断鼠标是否在某个层内?但是鼠标已经在被拖动的层内了,并且在放下之前会一直在这个层内,这样判断将会得出两个符合条件的结果,所以我们要排除被拖动的层,可以有很多解决方法,在这里我使用一个比较容易理解的方法:不直接判断鼠标是否在哪个层,而是判断被拖动的层是否在某个未被拖动的层内,所以判断的语句片段是这样的:
obj.style.posTop>rootNode.childNodes
[i].offsetTop&&obj.style.posTop<rootNode.childNodes[i].offsetTop+15 
这样的话,第一个条件:
obj.style.posTop>rootNode.childNodes[i].offsetTop
就将被拖动的本身排除掉了(当rootNode.childNodes[i]是被拖动的这个层obj的时候,
style.posTopoffsetTop 是相等的,所以大于>条件就不成立了,被拖动的层自身就这样被排除的)。
当然,还可以用其他更有效更直接的方法:
例如在onmousedown的时候就记录下被抓取的元素,然后在判断的时候直接逼开这个元素即可。
 
实际体验请运行下面代码框:)
 

 
 
更多资源查看专题:Web页面元素拖拽实例系列

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

Google
Google提供的相关资源
参与评论(条评论)
请遵守国家法律
笔名:
邮箱:
( 以上评论仅代表网友个人意见,不代表本站观点 )
相关资源
  • Web页面托拽 JavaScript Drag Demo 实例 [2007-1-28]
  • JavaScript Google IG Drag Demo [2007-1-28]
  • 怎么用javascript进行拖拽 [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]
  •