公司研发一个新的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. Power Gating的设计(概述)

    Leakage power随着CMOS电路工艺进程,功耗越来越大. Power Domain的开关一般通过硬件中的timer和系统层次的功耗管理软件来进行控制,需要在一下几方面做trade-off: ...

  2. HTML5，添加图片

    <img src="0.jpg" width="100"  height="150" alt="11">

  3. 前端框架与UI搭配

    如果是 Angular 那就选 Ionic (一对好 CP)如果是 Vue 那就选 Vux (基于 WeUI)如果是 jQuery 那就选 Framework7 (iOS 和 Android 双皮肤) ...

  4. 关于jQuery的bind()\trigger()\triggerHandler()

    1.bind() 事件绑定. 多个事件会链式累加,而不会覆盖. 即 $("div").bind("click",funtion(){alert("te ...

  5. python核心编程学习记录之基础知识

    虽然对python的基础知识有所了解,但是为了更深入的学习,要对python的各种经典书籍进行学习 第一章介绍python的优缺点,略过 第二章介绍python起步,第三章介绍python基础,仅记录 ...

  6. innodb buffer pool flush机制

    参考印风的博客: FLUSH操作的类型,总的来说,有三种刷新类型   BUF_FLUSH_LRU:表示从Buffer Pool的LRU上扫描并刷新 BUF_FLUSH_LIST:表示从Buffer P ...

  7. Python File.readlines() 方法

    python3的用法:

  8. html5+php实现文件的断点续传ajax异步上传

    html5+php实现文件的断点续传ajax异步上传 准备知识:断点续传,既然有断,那就应该有文件分割的过程,一段一段的传.以前文件无法分割,但随着HTML5新特性的引入,类似普通字符串.数组的分割, ...

  9. Asp.Net Mvc视图引擎Razor介绍

    1.Razor介绍 1)ASP.NET MVC3 带来了一种新的名为Razor 的视图引擎,提供了下列优点: Razor 的语法简单且清晰,只需要最小化的输入 Razor 容易学习,语法类似于 C#  ...

  10. BlueDroid介绍 【转】

    转自:http://blog.csdn.net/fen_liu/article/details/41213167 [-] 基本结构 代码区 http://www.cnblogs.com/hzl6255 ...