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

最新推荐文章于 2024-07-11 20:55:36 发布

tunsanty

最新推荐文章于 2024-07-11 20:55:36 发布

阅读量1.3k

点赞数

分类专栏： HTML/JS 文章标签： qq function xmlhttprequest javascript 服务器 generator

HTML/JS 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

现在很流行用javascript脚本来制作这些东西，下面我也多写几句方面大家理解怎么样一步步的去制作自己想要的东西。还有编码的思想。

当看到这些效果的时候，应该结合自己所知道的知识去想是怎么样实现的，当然这里实现的方法不是唯一的。每个人都有自己的思路，当想到的时候就自己主动的编码试一下。

这个系列文章第一部分，首先从最简单的拖动开始说起，有不懂的朋友可以留言。

简单的拖动DIV的主要编程思路：

1、应该了解拖动，首先即是坐标。也就是说，要了解DHTML里面的坐标的属性。这里我们用的是event.clientX和event.clientY，即鼠标相对于边距X的距离和Y的距离。如果有不明白的，可以去查阅相关资料，这里不再赘述。

2、如何得到拖动对的的坐标呢？可以用offsetTop和offsetLeft来得到，属性我也不再多说，请查阅DHTML参考。

3、应该有大致的思路了吧，用什么事件来触发拖动的句柄呢？当然可以用ondrag的事件，但是不太可取。也不太利于以后为兼容而做的准备工作。那还有什么事件可以用？仔细想想，拖动时会触发什么事件，一、当鼠标移上对象时。二、鼠标按下。三鼠标移动。四、鼠标放开。这几个也就是那几个事件。即对应的onmouseover、omousedown、onmousemove、onmouseup事件。

4、如何计算坐标？我的思路是这样的：一，鼠标按下时，记得拖动物件的相对坐标。二、拖动时捕获对象，并实时得到坐标，用当前的坐标减去原始坐标，得到新的坐标，并把拖动物件的left和top设置为当前的X和Y坐标。三、鼠标放开时，释放所有的对象。

5、开始编码。

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

一、关于坐标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.οnmοuseοver=function() {
//to do; never-online Demo
};
obj.οnmοusedοwn=function() {
//to do; never-online Demo
}
obj.οnmοusemοve=function() {
//to do; never-online Demo
}
obj.οnmοuseup=function() {
//to do; never-online Demo
}

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

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

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> how to make a drag division - http://www.never-online.net </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="never-online, blueDestiny">
<META NAME="Keywords" CONTENT="never-online, blueDestiny">
<META NAME="Description" CONTENT="http://www.never-online.net">
<style>

</style>
<SCRIPT LANGUAGE="JavaScript">
<!--

function neverDragDivision(fObj) { with (this)
{
if (!fObj) return;
this.bDraged = false;
this.oDragOrig = fObj;
oDragOrig.style.cursor = "move";
oDragOrig.onmousedown = function()
{
  var ofs = Offset(oDragOrig);
    oDragOrig.style.position = "absolute";
  oDragOrig.style.left = ofs.l;
  oDragOrig.style.top = ofs.t;
  oDragOrig.X = event.clientX - ofs.l;
  oDragOrig.Y = event.clientY - ofs.t;
  bDraged = true;
};
oDragOrig.onmousemove = function()
{
  if (!bDraged) return;
    oDragOrig.setCapture();
  oDragOrig.style.left = event.clientX - oDragOrig.X;
  oDragOrig.style.top = event.clientY - oDragOrig.Y;

};
oDragOrig.onmouseup = function()
{
  bDraged = false;
  oDragOrig.releaseCapture();
};
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 }
};
}};

//-->
</SCRIPT>
</HEAD>
<BODY>
<table>
<tr>
<td>
<div class="myDiv">
http://www.never-online.net
<p>power by blueDestiny, never-online</p>
</div>
</td>
<td>
<div class="myDiv" style="width:450px">
<p>never-online, Everlasting love for angela.</p>
</div>
</td>
</tr>
</table>
<h4 class="copyright"> Power By blueDestiny, never-online, <a href="http://www.never-online.net" _fcksavedurl="http://www.never-online.net">http://www.never-online.net</a> </h4>
<SCRIPT LANGUAGE="JavaScript">

</SCRIPT>
</BODY>
</HTML>

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

yinyz 发表于2006-05-26 09:15:00 IP: 219.239.107.*

求文字滚动效果，同时调用动态链接库。

需求：
1，一段文字，存在服务器端，例如tongzhi.txt，要取到客户端，并
以从下向上滚动的方式显示。
2，同时要在文字中加入几个字符串合数字，这几个字符串合数字是
通过调用服务器端的一个动态链接库获得

兄弟没分了，不知怎么能把分弄多些，Csdn太损了。

yinyuzhe@tsinghua.org.cn
yinyz@cesi.ac.cn

blueDestiny 发表于2006-05-26 18:06:00 IP: 219.159.87.*

你这个是典型的客户端和服务器端异步交互的程序。（如果是实时更新的话）

客户端生成xmlhttpRequest，获取服务器端数据。

再用marquee来显示出来当然也可以用DHTML来实现

不是实时更新的话，也不麻烦。即然是调用DOM+的东西，肯定是有接口的，知道接口了什么都好办了。也是一样的办法。你先写个大概的代码吧，有什么不懂的发email给我：blueDestiny [at] 126.com

tunsanty

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
如何制作类似msn（QQ）等网页中的拖动效果

现在很流行用javascript脚本来制作这些东西，下面我也多写几句方面大家理解怎么样一步步的去制作自己想要的东西。还有编码的思想。当看到这些效果的时候，应该结合自己所知道的知识去想是怎么样实现的，当然这里实现的方法不是唯一的。每个人都有自己的思路，当想到的时候就自己主动的编码试一下。这个系列文章第一部分，首先从最简单的拖动开始说起，有不懂的朋友可以留言。简单的拖动DIV的主要编程思路
复制链接

扫一扫