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

最新推荐文章于 2025-04-11 14:17:22 发布

califord

最新推荐文章于 2025-04-11 14:17:22 发布

阅读量2k

点赞数

分类专栏： AJAX 文章标签： qq function javascript generator class html

AJAX 专栏收录该内容

3 篇文章

订阅专栏

本文详细介绍如何在网页中实现类似MSN/QQ的拖动效果，包括获取鼠标位置、计算对象坐标、设置拖动事件及完整示例代码。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

如何制作类似msn（QQ）等网页中的拖动效果（二） <script language="javascript" type="text/javascript">document.title="如何制作类似msn（QQ）等网页中的拖动效果（二） - "+document.title</script>

如何制作类似msn（QQ）等网页中的拖动效果（一）http://blog.youkuaiyun.com/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.ο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>
<!--
body {
font-size:0.9em;
font-family:verdana;
background-color:appworkspace;
}
.myDiv {
border:4px solid #006699;
height:200px;
width:400px;
color:#003399;
padding:20px;
font-weight:bolder;
text-align:center;
background-color:#eeeeee;
}
.copyright
{
text-align: center;
font-size: 1em;
}
-->
</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">
<!--
var aDivs = document.getElementsByTagName("DIV");
for (var i=0; i<aDivs.length; i++) {
new neverDragDivision(aDivs[i]);
}
//-->
</SCRIPT>
</BODY>
</HTML>

查看高亮代码