[转]类似iGoogle的可移动,可停靠,可吸附层

最新推荐文章于 2014-10-11 13:37:00 发布
最新推荐文章于 2014-10-11 13:37:00 发布
阅读量880 收藏 1
点赞数
文章标签： class function fold module null div

<!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" />
<meta http-equiv="content-language" content="zh-cn" />
<meta name="author" content="forfor" />
<meta name="keywords" content="" />
<title>Demo</title>
<script type="text/javascript">
<!--
var IE=false,FF=false,W=window,D=document,H,B,GET="getElementsByTagName",GEI="getElementById",qq=0;
function fold(){
 var e;
 e=fixE(e);
 if(e)element=fixElement(e);
 element=element.parentNode.parentNode;
 element.className=element.className.indexOf("hide")>0?"module":"module hide";
}
var Drag={
 draging : false,
 x : 0,
 y : 0,
 element : null,
 fDiv : null,
 ghost : null,
 addEvent : function(){var a=D[GET]("li");for(var i=a.length-1;i>-1;i--)if(a[i].className=="module")a[i].οnmοusedοwn=Drag.dragStart;},
 ix:2,iy:7,
 ox:6,oy:7,
 fx:6,fy:6,
 dragStart : function (e){
  if(Drag.draging)return;
  var e;
  e=fixE(e);
  if(e)element=fixElement(e);
  
  /*********
  var k,s="";
  for(k in element)s+=k+" : "+element[k]+"<br/>";
  D.getElementById("bbb").innerHTML=s;
  **********/
  D.getElementById("aaa").innerHTML=element.parentNode.offsetTop+ ","+element.parentNode.offsetHeight;
  //测试
  if(element.className!="title")return;
  element=element.parentNode;
  Drag.element=element;
  //以上获得当前移动的模块
  Drag.x=e.layerX?e.layerX+Drag.fx:(IE?e.x+Drag.ix:e.offsetX+Drag.ox);
  Drag.y=e.layerY?e.layerY+Drag.fy:(IE?e.y+Drag.iy:e.offsetY+Drag.oy);
  //鼠标相对于模块的位置
  Drop.measure();
  if(e.layerX){Drag.floatIt(e);Drag.drag(e);}//fix FF
  B.style.cursor="move";
  D.οnmοusemοve=Drag.drag;
  D.οndragstart=function(){window.event.returnValue = false;}
  D.onselectstart=function(){window.event.returnValue = false;};
  D.οnselect=function(){return false};
  D.οnmοuseup=element.οnmοuseup=Drag.dragEnd;
  element.οnmοusedοwn=null;
 },
 drag : function (e){
  var e;
  e=fixE(e);
  if(!Drag.fDiv)Drag.floatIt(e);//for IE & Opera
  var x=e.clientX,y=e.clientY;
  Drag.fDiv.style.top=y+H.scrollTop-Drag.y+"px";
  Drag.fDiv.style.left=x+H.scrollLeft-Drag.x+"px";
  Drop.drop(x,y);
  //statu(e);
 },
 dragEnd : function (e){
  B.style.cursor="";
  D.οndragstart=D.οnmοusemοve=D.onselectstart=D.οnselect=D.οnmοuseup=null;
  Drag.element.οnmοusedοwn=Drag.dragStart;
  if(!Drag.draging)return;
  Drag.ghost.parentNode.insertBefore(Drag.element,Drag.ghost);
  Drag.ghost.parentNode.removeChild(Drag.ghost);
  B.removeChild(Drag.fDiv);
  Drag.fDiv=null;
  Drag.draging=false;
  Drop.init(D[GEI]("container"));
 },
 floatIt : function(e){
  var e,element=Drag.element;
  var ghost=D.createElement("LI");
  Drag.ghost=ghost;
  ghost.className="module ghost";
  ghost.style.height=element.offsetHeight-2+"px";
  element.parentNode.insertBefore(ghost,element);
  //创建模块占位框
  var fDiv=D.createElement("UL");
  Drag.fDiv=fDiv;
  fDiv.className="float";
  B.appendChild(fDiv);
  fDiv.style.width=ghost.parentNode.offsetWidth+"px";
  fDiv.appendChild(element);
  //创建容纳模块的浮动层
  Drag.draging=true;
 }
}
var Drop={
 root : null,
 index : null,
 column : null,
 init : function(it){
  if(!it)return;
  Drop.root=it;
  it.firstItem=it.lastItem=null;
  var a=it[GET]("ul");
  for(var i=0;i<a.length;i++){
   if(a[i].className!="column")continue;
   if(it.firstItem==null){
    it.firstItem=a[i];
    a[i].previousItem=null;
   }else{
    a[i].previousItem=a[i-1];
    a[i-1].nextItem=a[i];
   }
   a[i].nextItem=null;
   it.lastItem=a[i];
   a[i].index=i;
   a[i].firstItem=a[i].lastItem=null;
   var b=a[i][GET]("li");
   for(var j=0;j<b.length;j++){
    if(b[j].className.indexOf("module")==-1)continue;
    if(a[i].firstItem==null){
     a[i].firstItem=b[j];
     b[j].previousItem=null;
    }else{
     b[j].previousItem=b[j-1];
     b[j-1].nextItem=b[j];
    }
    b[j].nextItem=null;
    a[i].lastItem=b[j];
    b[j].index=i+","+j;
   }
  }
 },
 measure : function(){
  if(!Drop.root)return;
  var currentColumn=Drop.root.firstItem;
  while(currentColumn){
   var currentModule=currentColumn.firstItem;
   while(currentModule){
    currentModule.minY=currentModule.offsetTop;
    currentModule.maxY=currentModule.minY+currentModule.offsetHeight;
    currentModule=currentModule.nextItem;
   }
   currentColumn.minX=currentColumn.offsetLeft;
   currentColumn.maxX=currentColumn.minX+currentColumn.offsetWidth;
   currentColumn=currentColumn.nextItem;
  }
  Drop.index=Drag.element.index;
 },
 drop : function(x,y){
  if(!Drop.root)return;
  var x,y,currentColumn=Drop.root.firstItem;
  while(x>currentColumn.maxX)if(currentColumn.nextItem)currentColumn=currentColumn.nextItem;else break;
  var currentModule=currentColumn.lastItem;
  if(currentModule)while(y<currentModule.maxY){
   if(y>currentModule.minY-12){
    if(Drop.index==currentModule.index)return;
    Drop.index=currentModule.index;
    if(currentModule.index==Drag.element.index){if(currentModule.nextItem)currentModule=currentModule.nextItem;else break;}
    currentColumn.insertBefore(Drag.ghost,currentModule);
    Drop.column=null;
    window.status=qq++;
    return;
   }else if(currentModule.previousItem)currentModule=currentModule.previousItem;else return;
  }
  if(Drop.column==currentColumn.index)return;
  currentColumn.appendChild(Drag.ghost);
  Drop.index=0;
  Drop.column=currentColumn.index;
  window.status=qq++;
 }
}
var webNote={
 obj : null,
 canEdit : function(e){
  var e,element;
  e=fixE(e);
  element=fixElement(e);
  if(element.className!='webNote')return;
  if(typeof element.contentEditable!="undefined"){
   element.contentEditable=true;
   element.style.borderColor='red';
   element.focus();
   webNote.obj=element;
  }
 },
 cannotEdit : function(){
  if(!webNote.obj)return;
  if(typeof webNote.obj.contentEditable!="undefined"){
   webNote.obj.style.borderColor='#ffffe0';
   webNote.obj.contentEditable=false;
   webNote.obj=null;
  }
 }
}
function fixE(e){var e;e=e?e:(window.event?window.event:null);return e}
function fixElement(e){var e;return e.target?(e.target.nodeType==3?e.target.parentNode:e.target):e.srcElement;}
οnlοad=function(){
 B=D[GET]("body")[0];
 H=D[GET]("html")[0];
 Drop.init(D[GEI]("container"));
 Drag.addEvent();
}
function statu(e){
 var e,element;
 element=fixElement(e);
 var aa=D.getElementById("aaa");
 aa.innerHTML="e.xy:("+e.x+","+e.y+")<br/>e.offsetXY:("+e.offsetX+","+e.offsetY+")<br/>e.clientXY:("+e.clientX+","+e.clientY+")<br/>element.offsetLeftTop:("+element.offsetLeft+","+element.offsetTop+")<br/>e.layerXY:("+e.layerX+","+e.layerY+")";
}
//-->
</script>
<style type="text/css">
body,table,td,th,input,textarea,button,select{
 font:13px/16px Verdana,"宋体",sans-serif;
 text-align: center;
}
table{border-collapse:collapse;}
p{margin:0px;}
.container{
 margin-top: 8px;
 margin-right: auto;
 margin-bottom: 8px;
 margin-left: auto;
 text-align: left;
 width: 600px;
}
.column{width:33%;margin:0px;padding:0px;float:left;overflow:hidden;}
.module{margin:5px;padding:0px;border:1px solid #dcd;position:relative;background-color:white;list-style:none;}
.title{background-color:#edf;padding:1px 0px;width:100%;overflow:hidden;cursor:move;z-index:0;font-weight:bold;}
.cont{padding:3px;overflow:hidden;}
.hide .cont{display:none;}
.pageTitle{font-weight:bold;text-align:center;}
input.pageTitle{display:none;border:0px;padding:0px;width:100%;}
.webNote{background-color:#ffffe0;border:1px solid #ffffe0;}
textarea.webNote{display:none;overflow:hidden;padding:0px;border:0px;padding:0px;}
.ghost{border:1px dashed red;}
.float{position:absolute;z-index:100;margin:0px;padding:0px;overflow:hidden;list-style:none;-moz-opacity:.75;filter:Alpha(opacity=75);}
</style>
<!--[if IE]>
<script type="text/javascript">
IE=true;
</script>
<style type="text/css">
input.pageTitle{margin:-1px;}
</style>
<![endif]-->
<![if !IE]><![endif]>
</head>
<body>
<center>
<span class="pageTitle" onClick="with(this.nextSibling){value=this.innerHTML;style.display='block';focus()};this.style.display='none';">You can input a topic here!</span><input class="pageTitle" onBlur="with(this.previousSibling){D.title=innerHTML=this.value?this.value:'Demo';style.display='block';};this.style.display='none'" /></center>
<div class="container" id="container">
 <ul class="column">
  <li class="module">
   <div class="title"><span onClick="fold()">+</span>&nbsp;Coodinate</div>
   <div class="cont" id="aaa">content</div>
  </li>
  <li class="module">
   <div class="title"><span onClick="fold()">+</span>&nbsp;contentEditable</div>
   <div class="cont" onClick="alert('this.contentEditable:'+this.contentEditable)">click here</div>
  </li>
  <li class="module">
   <div class="title"><span onClick="fold()">+</span>&nbsp;long long ago</div>
   <div class="cont">有形者 生于无形 无能生有 有归于无<br/>是以 凡所有所相 皆是虚妄<br/>若是能见诸相非相 当知虚非真虚<br/>有生之气 有形之状 尽是幻也<br/>造物之所始 阴阳之所变者 谓之生 谓之死<br/>穷数达变 因形移易者 谓之化 谓之幻</br>了悟有无 参透虚实 自然遨游天地宇宙 无所阻碍<br/>是谓大幻之道</div>
  </li>
 </ul>
 <ul class="column">
  <li class="module">
   <div class="title"><span onClick="fold()">+</span>&nbsp;this.parentNode</div>
   <div class="cont"><button onClick="alert(this.parentNode.parentNode.parentNode.innerHTML)">parentNode</button></div>
  </li>
  <li class="module">
   <div class="title"><span onClick="fold()">+</span>&nbsp;webNote</div>
   <div class="cont"><div class="webNote" οnblur="webNote.cannotEdit()" onClick="webNote.canEdit(event)">You can note something here.<br/><br/>从前有座山<br/>山里有座庙</br>庙里有个老和尚讲故事</div><textarea class="webNote"></textarea></div>
  </li>
  <li class="module">
   <div class="title"><span onClick="fold()">+</span>&nbsp;Google</div>
   <div class="cont"><center><a href="http://www.google.com" style="font:bold 31px/2 Arial;">Gooooooogle</a></center></div>
  </li>
 </ul>
 <ul class="column">
  <li class="module">
   <div class="title"><span onClick="fold()">+</span>&nbsp;pia~~</div>
   <div class="cont">十里平湖霜满天<br/>寸寸青丝愁华年<br/>对月形单忘相护<br/>只羡鸳鸯不羡仙</div>
  </li>
  <li class="module">
   <div class="title"><span onClick="fold()">+</span>&nbsp;biu~~</div>
   <div class="cont">您好！<br/>主人不在，您可以在biu~的一声后留言<br/>biu~~</div>
  </li>
  <li class="module">
   <div class="title"><span onClick="fold()">+</span>&nbsp;无话可说</div>
   <div class="cont" id="bbb">吃葡萄不吐葡萄皮<br/>不吃葡萄倒吐葡萄皮<br/>(字数不够,再吃一遍......)</div>
  </li>
 </ul>
</div>
</div>
<div style="font-size:10px;line-height:14px;clear:both;margin:6px 3%;text-align:center;border:1px solid #eee;">&copy;2006 forfor</div>
</body>
</html>

 
cxzhq2002
关注
php版本 可移动框架 可添加，类似igoogle
01-06
标题中的“php版本 可移动框架 可添加，类似igoogle”表明这是一个基于PHP开发的、具有可拖动和自定义布局功能的框架，旨在模仿谷歌的个性化首页服务igoogle。igoogle允许用户根据个人喜好在首页上自由排列和添加...
Jquery仿IGoogle实现可拖动窗口示例代码
10-25
根据给定文件信息，本文将深入探讨JQuery仿IGoogle实现可拖动窗口的技术细节，并且对JQuery、easywidgets框架和实现方法进行详细解说。 首先，要了解JQuery。JQuery是一个快速、小巧且功能丰富的JavaScript库，它让...
[转]博客个性化定制-实现类似iGoogle首页功能
LD_21的专栏
07-27 317
最近在忙几个事，工作上做天河部落的升级改版，绕有兴致的做博客的个性化功能，以前我的博客也有几个样式模板，但是模块没有定制，昨天顺便就把我博客的个性化定制功能实现了，对于Asp.Net的博客个性化定制功能的方法总结如下： 1.简单的切换css样式文件 这是我之前的博客切换风格的方法，很简单，只需要改变页面的一个css样式文件即可，通过换css样式文件页面也完全可给人耳目一新，但其页面的html结...
Jquery仿IGoogle实现可拖动窗口
weixin_30235225的博客
08-15 78
google可谓是ajax的特效用的淋漓尽致，google suggest， google map，igoogle 可拖动窗口等等...今天要做一个网站的类似效果，与编程人生的站长沟通了一下，仿照iGoogle做了一个简单的小demo。 这个的demo是根据一个Jquery的框架直接做出来的:easywidgets。这个框架是可以免费下载的http://plugins.jq...
Jquery仿IGoogle实现可拖动窗口（源码）
weixin_34198881的博客
10-11 177
  google可谓是ajax的特效用的淋漓尽致，google suggest， google map，igoogle 可拖动窗口等等...今天仿照iGoogle做了一个简单的小demo。       这个的demo是根据一个Jquery的框架直接做出来的:easywidgets。这个框架是可以免费下载的http://plugins.jquery.com/project/easywidgets。...
伟大的个性化主页：6种服务可替代iGoogle
chuangji7401的博客
07-20 107
伟大的个性化主页：6种服务可替代iGoogle 谷歌在2013年11月将揭露谷歌的秘密活动iGoogle。虽然该公司对于那些仍然使用的服务，尚未做出一个合理的的说明，但是个性化主页确实存在。该服务让使用者按照个人的喜好，定制...
类似igoogle div拖拽 demo
LaoChai的专栏
05-26 1152
找了两个不错的插件，日后估计用的到 http://net.tutsplus.com/tutorials/%20-ajax/inettuts/ http://sonspring.com/journal/jquery-portlets
利用Silverlight实现类似iGoogle的浮动层拖拽效果
北京动点飞扬软件
07-07 1750
既然Silverlight号称是Ajax杀手，而且相比javascript更接近桌面应用，那么这种拖拽的效果自然是手到擒来。 布局容器选择： Silverlight提供了Canvas、Grid、StackPanel三种布局容器，基本能满足各种需要。个人习惯是用Grid做框架布局，具体内容利用StackPanel自组织，而Canvas则在某些特定场合，比如打字游戏的界面中使用。 一方面在自适应浏览器大小的角度上，Grid提供了两方面的自由度，StackPanel提供了一个方向的自由度，而Canv
利用 Silverlight 实现类似 iGoogle 的浮动层拖拽效果
weixin_34111819的博客
01-10 76
文章来源：http://www.pin5i.com/showtopic-22927.html觉得写得不错，刚好自己也遇到类似的问题，所以借用来参考。Demo： 布局容器选择： Silverlight提供了Canvas、Grid、StackPanel三种布局容器，基本能满足各种需要。个人习惯是用Grid做框架布局，具体内容利用StackPanel自组织，而...
Jquery仿iGoogle实现可拖动窗口（源码）
weixin_30562507的博客
04-16 83
google可谓是ajax的特效用的淋漓尽致，google suggest， google map，igoogle 可拖动窗口等等...今天仿照iGoogle做了一个简单的小demo。 这个的demo是根据一个Jquery的框架直接做出来的:easywidgets。这个框架是可以免费下载的http://plugins.jquery.com/project/easywidg...
利用 jQuery UI 和 Ajax 创建可定制的 Web 界面
soledede
09-17 168
如今，网站比以往更具可定制性，允许用户更改其空间，根据自己的喜好对其进行个性化。个性化的主页或仪表板页面（例如 iGoogle、MyYahoo! 和 MyAOL）日渐普及，大多数 Web 应用程序内甚至也整合了类似的功能。jQuery 库简化了此类复杂 JavaScript 交互的编写，随着 jQuery UI 的引入，这项功能得到了进一步的简化，该库以易于访问的 jQuery 插件的形式提供...
DIV可拖动，可改造为仿igoogle效果实例
05-15
在本文中，我们将深入探讨如何使用JavaScript实现一个可拖动的DIV元素，以此来创建一个类似于iGoogle的效果。iGoogle是Google提供的一款个性化主页服务，允许用户自定义页面布局，添加各种小工具。通过理解其核心...
基于netvibes源码实现类似igoogle的个性化主页
03-18
NULL 博文链接：https://coolzhi.iteye.com/blog/587868
120吨双级反渗透程序+混床程序，以及阻垢剂、杀菌剂 加药 一键制水，一键反洗，一键正洗，无人值守 西门子S7-200 sm
09-12
120吨双级反渗透程序+混床程序，以及阻垢剂、杀菌剂 加药。 一键制水，一键反洗，一键正洗，无人值守。 西门子S7-200 smart编程软件写的程序，程序+画面+电气原理图。 打包送出去，供初学者学习和研究。 程序有注释。
java基于SpringBoot+vue 校园新闻管理系统源码 带毕业论文
09-12
1、开发环境：SpringBoot框架；内含Mysql数据库；VUE技术；内含说明文档 2、需要项目部署的可以私信 3、项目代码都经过严格调试，代码没有任何bug！ 4、该资源包括项目的全部源码，下载可以直接使用！ 5、本项目适合作为计算机、数学、电子信息等专业的课程设计、期末大作业和毕设项目，作为参考资料学习借鉴。 6、本资源作为“参考资料”如果需要实现其他功能，需要能看懂代码，并且热爱钻研，自行调试。
weixin237基于微信小程序的医院挂号预约系统ssm.rar
09-12
所有源码都可以运行成功
基于Matlab界面GUI设计的打地鼠游戏[Matlab界面GUI设计].zip
最新发布
09-12
tkinter
weixin160在线课堂微信小程序+ssm.rar
09-12
所有源码都可以运行成功
JS实现iGoogle首页模块拖拽特效实战教程
本文主要探讨了如何使用JavaScript（JS）实现iGoogle风格的自定义首页模块拖拽特效，这是一种常见的前端交互设计技术，能提升用户体验和个性化设置。作者通过实例详细解析了实现这一功能的关键步骤和技术要点。 ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值