js实现层的拖动 - PHP程序员站--PHP程序员之家 PHP新手教程 PHP高级技巧 PHP新闻 PHP源码下载 PHP专题 Zend产品

| 论坛登录 | 游客访问 | 免费注册 | 忘记密码

RSS订阅

高级搜索

收藏本站

当前位置：主页 >> 网页制作 >> JS >> 文章内容

js实现层的拖动

[收藏此页] [打印本页]

来源：作者：发布时间：2007-12-27

本代码实现简单的层的拖动
javascript代码

/**
功能：拖动对象，并置当前对象为最高层
作者：feifengxlq《许立强》feifengxlq@hotmail.com
时间: 2006-10-24
演示：
*/
var move_obj_x0=0,move_obj_y0=0,move_obj_x1=0,move_obj_y1=0;//(x0,y0)为开始拖动时鼠标的位置(x1,y1)为开始拖动时对象的位置
var obj_moveable=false;

//开始拖动;
function startDrag(obj,id)
{
if(event.button==1)
{
obj.setCapture();
win=document.getElementById(id)
move_obj_x0 = event.clientX;
move_obj_y0 = event.clientY;
move_obj_x1 = parseInt(win.style.left);
move_obj_y1 = parseInt(win.style.top);
obj_moveable = true;
}
}
//拖动;
function drag(id)
{
if(obj_moveable)
{
win=document.getElementById(id) PHP程序员站--PHP程序员之家
win.style.left = (move_obj_x1 + event.clientX - move_obj_x0>0)?move_obj_x1 + event.clientX - move_obj_x0:0;
win.style.top = (move_obj_y1 + event.clientY - move_obj_y0>0)?move_obj_y1 + event.clientY - move_obj_y0:0;
}
}
//停止拖动;
function stopDrag(obj,id)
{
if(obj_moveable)
{
obj.releaseCapture();
obj_moveable = false;
}
}

演示代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>Untitled Document</title>
<script language="javascript" src="../src/js/move.js"></script> phperz.com
</head>

<body>
<div id="move_test" style="position:absolute">
<table width="300" border="1" cellspacing="0" cellpadding="0" onmousedown="startDrag(this,'move_test')" onmouseup="stopDrag(this,'move_test')" onmousemove="drag('move_test')">
<tr>
<td height="30"><div align="center">标题</div></td>
</tr>
</table>
<table width="300" border="1" cellspacing="0" cellpadding="0">
<tr>
<td height="100"><div align="center"><a href="http://www.phpobject.net">http://www.phpobject.net</a></div></td>
</tr>
</table>
</div> www.phperz.com
</body>
</html>

[收藏此页] [打印本页] [返回顶部]

上一篇：select也可以很漂亮下一篇：javascript判断上传图片大小

·一生要记住的五句话
·MYSQL出错代码列表
·MySQL 常用命令
·php读取mysql数据库乱码解决方法
·mysql中文乱码产生原因及解决方法
·Mysql中校对集utf8_unicode_ci与utf8_general_ci的区别
·MySQL平台数据库备份方案详细说明
·关于Mysql 4.1语言问题的完美解决方法
·小谈MySQL字符集
·DEDECMS文章点击数为0的解决方法

发表评论

全部评论(0条)

站内搜索
热门搜索　mysql 　基础　 php基础　 url

高级搜索网站地图站长工具 IP查询收藏本站

热点文章

·JavaScript树型菜单
·40个网页常用小代码
·javascript 加密解密函数详解
·javascript判断上传图片大小
·URL编码转换,escape() encodeURI() encodeU
·JavaScript从基础开始学习
·让文章里图片自动缩小的几种方法
·在IE流览器中如何让PNG图片透明
·如何用js替换css
·javascript代码压缩
·防止被IFRAME的代码
·HTML文件引入其它HTML文件的几种方法

网站首页 | 网站地图 | 高级搜索 | RSS订阅