公司研发一个新的cms,为了减少以后的修改和尽可能大程度的满足客户对cms的灵活需求,我的经理安排我去做一个与bootstrap的layout差不多的效果,这叫什么,锻炼的时候来了,加油,这个急不得一点一点的来吧,当然做肯定也是做一个简化版的,我初步规划做一个一个布局的,一个往布局里面扔内容的应该就足够了,js要求支持火狐谷歌和ie9以上的浏览器,ie8适当考虑,ie8一下的,不好意思,我放弃了,哈哈...

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>拖拽</title>
<style>
html,body{ width:100%; height:100%; padding:0; margin:0;}
#layout{ margin-left:200px; background:#f1f1f1; height:100%; overflow:auto;}
#list{ float:left; width:195px; height:100%; background:#f1f1f1;}
.box{ margin:10px; height:90px; background:#9CF; text-align:center; color:#fff; line-height:90px; padding:5px 10px;}
.css{ margin:10px; height:40px; background:#F99;text-align:center; color:#fff; line-height:40px; padding:5px 10px;}
</style>
</head> <body>
<div id="list">
<div class="box">
11111111
</div>
<div class="box">
2222222222
</div>
<div class="box">
33333333333
</div>
<div class="css">
css
</div>
</div>
<div id="layout"> </div>
</body>
</html>
<script type="text/javascript">
var oList=document.getElementById("list");
var oLayout=document.getElementById("layout");
var aDiv=oList.getElementsByTagName("div"); for(var i=aDiv.length-1;i>-1;i--){ aDiv[i].onmousedown=function(e){
var e=e||event;
var ismoved=false;
var disX=e.clientX-this.offsetLeft;
var disY=e.clientY-this.offsetTop; var oDiv=document.createElement("div");
oDiv.className=this.className;
oDiv.innerHTML=this.innerHTML;
oDiv.style.width=this.offsetWidth+"px";
oDiv.style.position="absolute";
oDiv.style.opacity=0;
oList.appendChild(oDiv); document.onmousemove=function(e){
var e=e||event;
ismoved=true;
oDiv.style.opacity=.5;
oDiv.style.left=e.clientX-disX+"px";
oDiv.style.top=e.clientY-disY+"px";
} document.onmouseup=function(){
if(ismoved){
oLayout.appendChild(oDiv);
oDiv.removeAttribute("style");
} document.onmousemove=null;
document.onmouseup=null;
}
return false;
}
}
</script>

高仿bootstrap的layout效果(一)的更多相关文章

  1. html5的audio实现高仿微信语音播放效果

    效果图 前台大体呈现效果图如下: 点击就可以播放mp3格式的录音.点击另外一个录音,当前录音停止! 思路 关于播放动画,这个很简单,我们可以用css3的逐帧动画来实现.关于逐帧动画,我之前的文章也写过 ...

  2. html5的audio实现高仿微信语音播放效果Demo

    HTML部分: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <t ...

  3. 高仿QQ、微信效果的图片浏览器(支持原图和缩略图、多种手势、CocoaPods)

    感谢原文作者的分享 本文转载至 http://my.oschina.net/u/2406027/blog/735738 PYPhotoBrowser GitHub地址:https://github.c ...

  4. 高仿bootstrap样式的分页插件

    链接:https://pan.baidu.com/s/1jKgn2hK 密码:whwl 不知道是自己的第几个分页插件了,以前写一个丢一个,桌面,U盘,移动硬盘.想用的时候找不到,这次传网上来.大家帮忙 ...

  5. html5的audio实现高仿微信语音播放效果(实际项目)

    HTML部分: <div class="tab-pane fade dialog-record" id="dialogRecord"> <vo ...

  6. Android -- 真正的 高仿微信 打开网页的进度条效果

    (本博客为原创,http://www.cnblogs.com/linguanh/) 目录: 一,为什么说是真正的高仿? 二,为什么要搞缓慢效果? 三,我的实现思路 四,代码,内含注释 五,使用方法与截 ...

  7. 高仿京东到家APP引导页炫酷动画效果

    前言 京东到家APP的引导页做的可圈可点,插画+动效,简明生动地说明了APP最吸引用户的几个亮点(商品多,价格低,配送快...).本文主要分析拆解这些动画效果,并完成一个高仿Demo,完整的Demo代 ...

  8. 《IT蓝豹》高仿花田ios版标签移动效果

    高仿花田ios版标签移动效果,长按每一个item拖动到自己想要位置后,后面位置移动补全效果 . 本项目适合研究gridview拖拽效果的朋友下载. 学习android动画特效. 本项目主要靠DragG ...

  9. HTML5 Canvas 高仿逼真 3D 布料图案效果

    HTML5 规范引进了很多新特性,其中最令人期待的之一就是 Canvas 元素,HTML5 Canvas 提供了通过 JavaScript 绘制图形的方法,非常强大.下面给大家分享一个 HTML5 C ...

随机推荐

  1. angularjs---$http.post发的数据,后台取不到

    我用$http.post(url, data). 后台用play框架,不知道为什么总是取不到data数据.如果直接用$.post(url, data); 就可以! 后台Play的一个action: 打 ...

  2. OpenStack 的NAT解决办法

    原因 iptables中的nat表会对数据进行封包换目标,源地址,在我们的系统中是不需要的.所以我们做了如下操作 操作 /etc/nova/nova.conf的 1 2 #routing_source ...

  3. bug管理规范

    资源来自:http://wenku.baidu.com/view/ae55b3b565ce05087632132b.html

  4. Notepad++编辑Pyhton文件的自动缩进的问题(图文)

    转自:http://www.xuebuyuan.com/1102224.html 这个问题一直困扰我很久,Python对缩进很敏感,一般建议缩进用空格,而 Notepad++的自动缩进是用的TAB,g ...

  5. Google 开发新的开源系统 Fuchsia

    google 最新os 下载 https://github.com/fuchsia-mirror/magenta 本文转自:http://www.oschina.net/news/76094/goog ...

  6. Hive文件格式

    hive文件存储格式包括以下几类: 1.TEXTFILE 2.SEQUENCEFILE 3.RCFILE 4.ORCFILE(0.11以后出现) 其中TEXTFILE为默认格式,建表时不指定默认为这个 ...

  7. VC中常用的宏

        我们在VS环境中开发的时候,会遇到很多宏定义,这些宏可以应用到代码中,或用于编译.工程选项等设置,总之是我们开发中必不可少的工具,有必要做一个总结.有些宏是C/C++定义的,有些宏是VC环境预 ...

  8. php中method_exists()和is_callable()如何进行语句判断

    method_exists()和is_callable()方法进行判断.那么两则区别是什么呢? 已知类文件如下: class Student{private $alias=null;private $ ...

  9. Asp.net Vnext IValueProvider

    概述 本文已经同步到<Asp.net Vnext 系列教程 >中] IValueProvider 根据ValueProvider获取数据,在对数据进行绑定 代码实现 private cla ...

  10. 如何在plSql查询数据查出的数据可编辑

    最近开发项目时要经常自己造数据,遇到好多查询出数据时要进行修改.上网查询资料 总结如下: plSql允许查询数据可以编辑的条件是必须查询出rowid 在某个表上点击query data 出现的sql语 ...