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

现在很流行用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、开始编码。

 

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