<%@ page language="java" import="java.util.*" pageEncoding="GB18030"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme() + "://"
+ request.getServerName() + ":" + request.getServerPort()
+ path + "/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<title>zhou's html</title>
</head>
<body>
一共三个层,下面还有一个,把他拖上来,按下文字和button是不可以拖动的//一共三个层,下面还有一个,把他拖上来,按下文字和button是不可以拖动的//一共三个层,下面还有一个,把他拖上来,按下文字和button是不可以拖动的
<div id="test1"
style='border:1px dashed;left:700px;top:320px;width:250px;height:200px;background-color:#F9F7ED;position:relative;text-align:left'>
<span>  构件库</span>
<br />
<a style="text-decoration:none;" href="http://www.hao123.com">   rss</a>
</div>
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<script type="text/javascript" charset="utf-8">
var $=function(id){return document.getElementById(id)};
Array.prototype.extend=function(C){for(var B=0,A=C.length;B<A;B++){this.push(C[B]);}return this;}
function divDrag(){
var A,B;
var zIndex=1;
this.dragStart=function(e){
e=e||window.event;
if((e.which && (e.which!=1))||(e.button && (e.button!=1)))return;
var pos=this.$pos;
if(document.defaultView){
_top=document.defaultView.getComputedStyle(this,null).getPropertyValue("top");
_left=document.defaultView.getComputedStyle(this,null).getPropertyValue("left");}
else{
if(this.currentStyle){_top=this.currentStyle["top"];_left=this.currentStyle["left"];}
}
pos.ox=(e.pageX||(e.clientX+document.documentElement.scrollLeft))-parseInt(_left);
pos.oy=(e.pageY||(e.clientY+document.documentElement.scrollTop))-parseInt(_top);
if(!!A){
if(document.removeEventListener){
document.removeEventListener("mousemove",A,false);
document.removeEventListener("mouseup",B,false);
}else{
document.detachEvent("onmousemove",A);
document.detachEvent("onmouseup",B);
document.detachEvent("ondragstart",G);
}
}
A=this.dragMove.create(this);
B=this.dragEnd.create(this);
if(document.addEventListener){
document.addEventListener("mousemove",A,false);
document.addEventListener("mouseup",B,false);
}else{
document.attachEvent("onmousemove",A);
document.attachEvent("onmouseup",B);
G=function(){return false};
document.attachEvent("ondragstart",G);
}
this.style.zIndex=(++zIndex);
this.stop(e);
}
this.dragMove=function(e){
e=e||window.event;
var pos=this.$pos;
this.style.top=(e.pageY||(e.clientY+document.documentElement.scrollTop))-parseInt(pos.oy)+'px';
this.style.left=(e.pageX||(e.clientX+document.documentElement.scrollLeft))-parseInt(pos.ox)+'px';
this.stop(e);}
this.dragEnd=function(e){
var pos=this.$pos;
e=e||window.event;
if((e.which && (e.which!=1))||(e.button && (e.button!=1)))return;
if(document.removeEventListener){
document.removeEventListener("mousemove",A,false);
document.removeEventListener("mouseup",B,false);
}else{
document.detachEvent("onmousemove",A);
document.detachEvent("onmouseup",B);
document.detachEvent("ondragstart",G);
}
A=null;
B=null;
this.style.zIndex=(++zIndex);
this.stop(e);
}
this.position=function (e){
var t=e.offsetTop;
var l=e.offsetLeft;
while(e=e.offsetParent){
t+=e.offsetTop;
l+=e.offsetLeft;
}
return {x:l,y:t,ox:0,oy:0}
}
this.stop=function(e){
if(e.stopPropagation){
e.stopPropagation();
}else{
e.cancelBubble=true;}
if(e.preventDefault){
e.preventDefault();}
else{e.returnValue=false;}
}
this.stop1=function(e){
e=e||window.event;
if(e.stopPropagation){
e.stopPropagation();
}else{
e.cancelBubble=true;} }
this.create=function(bind){
var B=this;
var A=bind;
return function(e){
return B.apply(A,[e]);
}
}
this.dragStart.create=this.create;
this.dragMove.create=this.create;
this.dragEnd.create=this.create;
this.initialize=function(){
for(var A=0,B=arguments.length;A<B;A++){
C=arguments[A];
C=(typeof(C)=='object')?C:(typeof(C)=='string'?$(C):null);
if(!C)continue;
C.$pos=this.position(C);
C.dragMove=this.dragMove;
C.dragEnd=this.dragEnd;
C.position=this.position;
C.stop=this.stop;
var $A=[];
$A=$A.extend(C.getElementsByTagName('span')||[]).extend(C.getElementsByTagName('input')||[]);
for(var D=0,E=$A.length;D<E;D++){
if(C.addEventListener){
$A[D].addEventListener("mousedown",this.stop1,false);
$A[D].addEventListener("mousemove",this.stop1,false);
}else{
$A[D].attachEvent("onmousedown",this.stop1);
$A[D].attachEvent("onmousemove",this.stop1);
}
}
if(C.addEventListener){
C.addEventListener("mousedown",this.dragStart.create(C),false);
}else{
C.attachEvent("onmousedown",this.dragStart.create(C));
}
} }
this.initialize.apply(this,arguments);
}
//生成拖动层很简单
new divDrag($('test1'));
</script>
</body>
</html>
分享到：
相关推荐
7. **应用实例**：浮动层效果常用于广告展示、提示信息、模态对话框、菜单等场景。在实际项目中，开发者可以灵活调整和扩展这个基础效果，以满足具体需求。 8. **性能优化**：在实现浮动层时，需要注意性能问题，...
这个“jQuery+CSS图片浮动层效果”压缩包包含了一个利用jQuery库和CSS样式实现的此类功能的实例。以下是关于这个主题的详细解释。 首先，jQuery是一个广泛使用的JavaScript库，它简化了JavaScript的DOM操作、事件...
- `css-dock-menu.zip`：CSS Dock Menu可能是一个使用Ajax的浮动菜单系统，实现动态加载和交互。 4. **标签解析** - "ajax 实例"：表明这是关于Ajax技术的具体应用案例。 - "控件"：可能指的是这些实例中包含的...
一个仿Vista风格的JS Ajax浮动窗口特效，也就是大家常见的网页弹出层，可在这个窗口中打个网址，其实本浮动层代码实现了用JS模拟Win界面窗口的效果，窗口下边还有类似于最小化后的效果，这个拖动可随意拖动位置，可...
这些控件利用Ajax技术，实现了页面的部分刷新，提高了用户体验，同时也降低了服务器的负载。下面将详细探讨AjaxControlToolkit中的主要控件及其应用实例。 1. Accordion 控件：Accordion允许你在有限的空间内展示多...
【标题】：“网页层拖动实例(ASP.NET+AJAX)”是一个示例项目，它结合了ASP.NET技术和AJAX（Asynchronous JavaScript and XML）来实现网页元素的动态拖放功能。这种技术通常用于提高用户体验，让用户能够通过鼠标交互...
超多的jQuery Ajax浮动提示特效,这些浮动提示效果有圆角样式,有渐变动画,还可关闭,带有阴影,有些是有动画效果的,如示例截图所示,很多种风格样式,十分漂亮,通过本示例,你可以学会这些浮动提示层的用法.
而Ajax（异步JavaScript和XML）是一种在无需刷新整个页面的情况下更新部分网页内容的技术，两者结合可以实现丰富的交互效果。 1. **自动补全输入框** 自动补全功能是用户体验的重要组成部分，它通过用户输入的字符...
本文将深入探讨一个使用Ajax和JavaScript实现的弹出层实例，特别是如何利用CSS固定定位（fixed positioning）来创建浮动效果。 首先，让我们理解Ajax的核心概念。Ajax允许在不重新加载整个网页的情况下，与服务器...
在“Ajax弹出层插件Lightbox的应用实例”中，我们可以探讨以下几个关键知识点： 1. **Ajax技术**：Ajax（异步JavaScript和XML）是一种在无需重新加载整个网页的情况下更新部分网页内容的技术。通过XMLHttpRequest...
摘要:脚本资源,jQuery,弹出层,Js浮动层 基于jQuery的JavaScript浮动层用法实例，实例中演示弹出了宽度为700PX/350PX/500PX的浮动窗口，有了实例，大家用起来就得心应手了，代码中的jQuery，引自google官方的托管库...
在网页设计中，"jQuery页面滚动时层智能浮动定位"是一种常见的交互效果，它使得页面上的某些元素（如导航栏、侧边栏广告或者提示信息）在用户滚动页面时始终保持在可视区域，提供更好的用户体验。这种效果是通过...
在本项目"用Ajax实现简单相册"中，我们将探讨如何利用Ajax来创建一个动态展示图片的相册，提高用户体验，减少服务器负载，以及实现页面无刷新浏览。 一、Ajax基础 Ajax的核心是JavaScript对象XMLHttpRequest，它...
在本文中，我们将深入探讨如何使用jQuery实现一个浮动层，使其随着浏览器的滚动条滚动而保持在页面的指定位置。这种方法在很多网站中都有应用，比如固定顶部导航栏、广告浮窗、联系信息悬浮框等。 首先，为了实现这...
总结来说，通过本文的学习，我们可以掌握如何使用jQuery以及stickySidebar插件来创建一个在滚动页面时能固定在侧边的浮动层。这不仅增强了页面的可用性，也提升了用户与页面交互的便捷性。对于任何希望提高网页用户...
Ajax仿iGoogle双击编辑-网页拖动完整实例是一个典型的前端开发示例，它结合了Ajax、JavaScript和CSS等技术，实现了一种类似iGoogle的交互体验。iGoogle是谷歌提供的一种个性化主页服务，允许用户自定义布局和内容。...
【标题】"jQuery左侧浮动层热门新闻列表滑动动画展示"是基于JavaScript库jQuery实现的一种网页动态效果。这种效果常用于网站的侧边栏，显示滚动的新闻标题或热点信息，提升用户交互体验，使网站看起来更加生动活泼。...
这个压缩包“ASP实例开发源码-qq在线客服浮动代码可展开收缩.zip”包含了一个具体的ASP应用实例，专注于实现一个qq在线客服功能，且该功能允许代码在页面上以浮动形式展现，并能进行展开和收缩操作。 在ASP中，...
本文将深入探讨如何使用jQuery实现一个“鼠标悬停在按钮上弹出DIV层页面，鼠标离开后层消失”的功能，这通常被称为“浮动提示框”或“悬停弹窗”。这个功能在很多网站，如当当网，被广泛应用来展示更多的信息或者...
在本实例中，jQuery被用来创建一个浮动层，这个浮动层会在页面内容正在加载时显示，提供一种视觉反馈，告知用户页面正在处理请求。 浮动层，顾名思义，是在页面上浮动的元素，它可以覆盖在其他内容之上，通常用于...