如何制作类似msn(QQ)等网页中的拖动效果(二)

转载 2006年06月05日 20:52:00
 
 如何制作类似msn(QQ)等网页中的拖动效果(二)

如何制作类似msn(QQ)等网页中的拖动效果(一)http://blog.csdn.net/BlueDestiny/archive/2006/05/25/755189.aspx

因为篇幅原因,所以得分开来写,这些层次也清晰一些

接着上面的讲。

我们按照上面的思路来一步步的写代码

一、关于坐标event.clientX和event.clientY,而为什么不用event.x和event.y,以后我会写清楚,其实已经写好了的。看情况我就会贴出来。转入正题吧,看看参考
clientX 设置或获取鼠标指针位置相对于窗口客户区域的 x 坐标,其中客户区域不包括窗口自身的控件和滚动条。
clientY 设置或获取鼠标指针位置相对于窗口客户区域的 y 坐标,其中客户区域不包括窗口自身的控件和滚动条。

二、得到拖动物件的坐标。即得到绝对坐标,用以下代码。参数e为拖动物件对象,使用函数时传入。返回的是对象的X坐标、Y坐标、宽度、长度的数组关联。而为什么还要用迭代求offsetLeft和offsetTop呢?因为他们是相对于父坐标而言的,所以必须通过循环来得到绝对定位。
 function Offset(e) {
  var t = e.offsetTop;
  var l = e.offsetLeft;
  var w = e.offsetWidth;
  var h = e.offsetHeight;
  while(e=e.offsetParent) {
   t+=e.offsetTop;
   l+=e.offsetLeft;
  }
  return { t:t, l:l, w:w, h:h }
 };

三、用事件触发程序句柄。
obj.onmouseover=function() {
//to do; never-online Demo
};
obj.onmousedown=function() {
//to do; never-online Demo
}
obj.onmousemove=function() {
//to do; never-online Demo
}
obj.onmouseup=function() {
//to do; never-online Demo
}

四、拖动时得到坐标。
obj.onmousedown=function() {
//当按下时记住原始坐标。never-online Demo
obj.X = event.clientX - Offset(obj).l;
obj.Y = event.clientY - Offset(obj).t;
}
obj.onmousemove=function() {
新坐标减去旧坐标得到当前位置 never-online Demo
obj.style.left = event.clientX - obj.X;
obj.style.top = event.clientY - obj.Y;
}

五、看看完整的简单拖动层代码吧。

查看高亮代码
第三节将讲述如何一步步的完善拖动层代码。

Trackback: http://tb.blog.csdn.net/TrackBack.aspx?PostId=755249

如何在网页中添加MSN和QQ等即时通讯的链接?

QQ 很简单,直接到官网(http://imis.qq.com/webpresence/code.shtml)选择相关的样式,复制其代码即可. MSN相对有点复...
  • usersmj
  • usersmj
  • 2007年11月14日 10:29
  • 1820

如何制作类似msn(QQ)等网页中的拖动效果

现在很流行用javascript脚本来制作这些东西,下面我也多写几句方面大家理解怎么样一步步的去制作自己想要的东西。还有编码的思想。当看到这些效果的时候,应该结合自己所知道的知识去想是怎么样实现的,当...
  • tunsanty
  • tunsanty
  • 2006年07月08日 13:01
  • 1196

如何制作类似msn(QQ)等网页中的拖动效果(一)

现在很流行用javascript脚本来制作这些东西,下面我也多写几句方面大家理解怎么样一步步的去制作自己想要的东西。还有编码的思想。当看到这些效果的时候,应该结合自己所知道的知识去想是怎么样实现的,当...
  • califord
  • califord
  • 2006年06月05日 20:53
  • 1267

利用Register protocol实现网页调用桌面程序(类似迅雷、QQ等)

前言 我们经常看到 tencent://.. thunder://     这两种开头的网址,往往觉得很奇怪,很想弄懂其中的原理,是如何实现的,我查找了相关的 资料,终于找到了,跟大家分享下。 ...
  • CometNet
  • CometNet
  • 2012年11月25日 15:42
  • 6227

网页中插入即时沟通工具 QQ,MSN,SKYPE,旺旺等

网页中插入即时沟通工具 QQ,MSN,SKYPE,旺旺等2008-03-12 14:02QQ在线咨询代码,MSN在线代码,雅虎通在线代码,贸易通在线代码即时通讯如雅虎通,腾讯QQ,微软MSN,AOL ...
  • hytdsky
  • hytdsky
  • 2009年10月22日 12:39
  • 1735

对比MSN和QQ

想到了谷歌和百度在中国人(除去港澳台海外)人群中的口碑,谷歌总是那么的高级那么的有没正直,只能用脑残二字来形容那些【嘴上心里一直唠叨着谷歌什么都是对的、什么都是好的优秀的】人! MSN和QQ...
  • default7
  • default7
  • 2012年12月02日 00:31
  • 929

教你作类似msn(QQ)等网页中窗口的拖动效果

现在很流行用javascript脚本来制作这些东西,下面我也多写几句方面大家理解怎么样一步步的去制作自己想要的东西。还有编码的思想。 当看到这些效果的时候,应该结合自己所知道的知识去想是怎么样实...
  • guyjones123
  • guyjones123
  • 2012年06月26日 13:06
  • 232

自定义QQ消息红点拖动的效果

自定义QQ消息提示的红点的效果,下面是github上的源码地址(申明不是我写的我也是从网上找的) github地址:https://github.com/dkmeteor/Bubble-Notifi...
  • qhs1573
  • qhs1573
  • 2015年03月02日 11:57
  • 2602

QQ面板的拖动效果【js】

function getByClass(clsName,parent){ var oParent=parent?document.getElementById(parent):document, ...
  • lin14543
  • lin14543
  • 2016年08月17日 09:10
  • 186

类似于QQ新消息提醒-前端

类似于QQ消息一样的提示,终于被搞定了!
  • lixuegen
  • lixuegen
  • 2015年05月26日 00:47
  • 727
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:如何制作类似msn(QQ)等网页中的拖动效果(二)
举报原因:
原因补充:

(最多只允许输入30个字)