公司研发一个新的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. Oracle Savepoint

    1.目的: Use the SAVEPOINT statement to identify a point in a transaction to which you can later roll b ...

  2. 4项技巧使你不再为PHP中文编码苦恼

    PHP程序设计中中文编码问题曾经困扰很多人,导致这个问题的原因其实很简单,每个国家(或区域)都规定了计算机信息交换用的字符编码集,如美国的扩展 ASCII 码,中国的 GB2312-80,日本的 JI ...

  3. Yii2下拉框实现

    详细介绍yii2下拉框的实现方法,以商品分类的下拉框为例: 第一种方法:使用Html的activeDropDownList(),该方法的优点是:可以自定义下拉框的样式.具体实现如下: 1.控制器中,获 ...

  4. yii2语言设置

    1.父配置文件在yii2/base/Application中的$language="en-US", 修改项目的语言可以修改项目的配置文件main.php中加'language'=& ...

  5. Parse_ini_file

    parse_ini_file() 函数解析一个配置文件,并以数组的形式返回其中的设置. 注释:本函数可以用来读取你自己的应用程序的配置文件.本函数与 php.ini 文件没有关系,该文件在运行脚本时就 ...

  6. z/os上的tar和gzip(2)

    前一篇文章写过了如何合成并压缩大批量文件,这篇文章解释一下如何在拿到压缩文件后如何解压并还原大批量文件.   解压缩的JCL很简单,如下所示,和压缩的JCL类似,只要把参数改成UNPACK,然后设置一 ...

  7. Java随学随记

    1.一个Java源文件可包含三个“顶级”要素: (1)一个包(package)声明(可选) (2)任意数量的导入(import)语句 (3)类(class)声明 该三要素必须以上顺序出现.即,任何导入 ...

  8. 苹果系统直接读写 ntfs 磁盘

    苹果系统对 ntfs 能读,但不能写. 方案1:修改 fstab 法 ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ 读写支持.在使用本教学文章之前,请先确定你没有安 ...

  9. 【python cookbook】【数据结构与算法】15.根据字段将记录分组

    问题:想根据字典或者对象实例的某个特定的字典(比如日期)来分组迭代数据 解决方案:itertools.groupby()函数在对数据进行分组时特别有用(前提是先以目标字典进行排序) rows = [ ...

  10. 在keil 4中添加stc系列芯片的方法--【sky原创】

    在keil 4中添加stc系列芯片的方法: 1.从官网下载uv3.cdb的文件网址是:http://www.stcmcu.com/ 2.下载好后把uv3.cdb文件改成STC.cdb:3. 然后将[S ...