"JavaScript拖动效果实现" 在网页开发中,JavaScript常常被用来增强用户体验,例如实现元素的拖动功能。本资源主要讲述了如何使用JavaScript来实现页面元素的上下左右拖动。通过以下代码示例,我们可以了解到实现这一功能的关键点。 首先,我们需要在HTML结构中设置可拖动的元素,并为其添加特定的CSS样式,以便于视觉上的区分和操作。在提供的代码中,可以看到`.content`类用于定义一个容器,包含`.left`, `.center`, 和 `.right`三个浮动的子元素。`.mo`类是可拖动的模块,具有边框、背景色以及鼠标指针样式,`.moh1`类用于定义模块的头部,提供拖动功能。 CSS部分中的`.dragging`类用于在拖动过程中改变元素的透明度,增加拖动时的视觉反馈。`FILTER`和`opacity`属性用于IE和非IE浏览器的透明度兼容。 接着,我们看JavaScript部分。在`<script>`标签中,定义了一个全局对象`dragobj`,用于存储拖动过程中的相关信息。`window.onerror`函数设置为返回`false`,防止错误导致脚本停止执行。 `on_ini`函数是页面加载完成后执行的初始化函数。在这个函数中,我们可以看到`var domid = 12`,这个变量可能用于标识或跟踪拖动的元素。然后,通过遍历页面上所有具有`class="mo"`的元素,为它们添加鼠标按下(`onmousedown`)和鼠标移动(`onmousemove`)事件监听器。 在`onmousedown`事件处理函数中,记录了鼠标的初始位置和拖动元素的位置,以便在鼠标移动时计算元素的新位置。`onmousemove`事件处理函数则根据鼠标的移动来更新元素的位置。这里的关键是计算鼠标的偏移量,并将这个偏移量加到元素的当前位置,从而实现拖动效果。 最后,当鼠标抬起(`onmouseup`)时,取消对`onmousemove`事件的监听,结束拖动操作。同时,移除`.dragging`类,恢复元素的正常显示状态。 通过这种方式,我们可以创建出一个用户可以自由拖动的模块,增强了网页的交互性。这种技术广泛应用于各种网页应用,如拖放布局、可调整大小的面板等。了解并掌握JavaScript拖动技术,对于提升网页动态交互的用户体验有着重要的作用。
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>Js无刷新添加新层</title>
<style>
body {margin:0px;padding:0px;font-size:12px;text-align:center;}
body > div {text-align:center; margin-right:auto; margin-left:auto;}
.content{width:900px;}
.content .left{
float:left;
width:20%;
border:1px solid #0066CC;
margin:3px;
}
.content .center{float:left;border:1px solid #FF0000;margin:3px;width:57%}
.content .right{float:right;width:20%;border:1px solid #FF0000;margin:3px}
.mo{height:auto;border:1px solid #CCC;margin:3px;background:#FFF}
.mo h1{background:#ECF9FF;height:18px;padding:3px;cursor:move}
.closediv{cursor:default;}
.minusspan{cursor:default;}
.mo .nr{height:80px;border:1px solid #F3F3F3;margin:2px}
h1{margin:0px;padding:0px;text-align:left;font-size:12px}
.dragging {
FILTER: progid:DXImageTransform.Microsoft.Alpha(opacity=60); opacity: 0.6; moz-opacity: 0.6
}
</style>
<script language="javascript">
var dragobj={}
window.onerror=function(){return false}
var domid=12
String.prototype.inc=function(s){return this.indexOf(s)>-1?true:false}
var agent=navigator.userAgent
window.isOpr=agent.inc("Opera")
window.isIE=agent.inc("IE") && !isOpr
window.isMoz=agent.inc("Mozilla") && !isOpr && !isIE
if(isMoz){
Event.prototype.__defineGetter__("x",function(){return this.clientX+2})
Event.prototype.__defineGetter__("y",function(){return this.clientY+2})
}
basic_ini()
}
function basic_ini(){
window.$=function(obj){return typeof(obj)=="string"?document.getElementById(obj):obj}
window.oDel=function(obj){if($(obj)!=null){$(obj).parentNode.removeChild($(obj))}}
}
window.oDel=function(obj){if($(obj)!=null){$(obj).parentNode.removeChild($(obj))}}
window.onload=function(){
on_ini()
var o=document.getElementsByTagName("h1")
for(var i=0;i<o.length;i++){
o[i].onmousedown=addevent;
//添加折叠和关闭按钮
var tt = document.createElement("div");
tt.style.cssText = "float:left";
var span = document.createElement("span");
span.innerHTML = "--"+o[i].innerHTML;
span.style.cssText = "cursor:default;";
span.onmousedown = minusDiv;
剩余7页未读,继续阅读
- 粉丝: 0
- 资源: 1
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
最新资源
- C++标准程序库:权威指南
- Java解惑:奇数判断误区与改进方法
- C++编程必读:20种设计模式详解与实战
- LM3S8962微控制器数据手册
- 51单片机C语言实战教程:从入门到精通
- Spring3.0权威指南:JavaEE6实战
- Win32多线程程序设计详解
- Lucene2.9.1开发全攻略:从环境配置到索引创建
- 内存虚拟硬盘技术:提升电脑速度的秘密武器
- Java操作数据库:保存与显示图片到数据库及页面
- ISO14001:2004环境管理体系要求详解
- ShopExV4.8二次开发详解
- 企业形象与产品推广一站式网站建设技术方案揭秘
- Shopex二次开发:触发器与控制器重定向技术详解
- FPGA开发实战指南:创新设计与进阶技巧
- ShopExV4.8二次开发入门:解决升级问题与功能扩展