公司研发一个新的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. OpenGl And 视图

    OpenGl And 视图 标签(空格分隔): game 简介 本文主要介绍坐标系的观念, 以及在openGL中的视图及其相关的变换. 大纲 视图.模型.投影变换概念 Opengl中对各种变换的支持 ...

  2. 【rails3教材】博客构建过程2

    2. 使用脚手架快速搭建网页 rails的脚手架可以快速生成应用程序的一些片段,如果你需要为一个资源创建一系列的控制器视图模型,那么脚手架就是你需要的工具 3. 创建资源 对于一个博客程序,你可以以生 ...

  3. MySQL5.5半同步模式

    MySQL5.5支持半同步的复制模式,什么是半同步的? 1. MySQL5.5之前的Master-SLave的复制模式是异步的,这里的文档有详细的说明;

  4. stdout.read()与stdout.readlines()方法同时使用后果

    stdout.read()与stdout.readlines()方法同时使用将无法导致最后使用的stdout.readlines()读取的内容为空,原因是首先调用的stdout.read()已将数据读 ...

  5. python logging 替代print 输出内容到控制台和重定向到文件

    转自:http://blog.csdn.net/z_johnny/article/details/50740528

  6. 前端开发自动化工作流工具，JavaScript自动化构建工具grunt、gulp、webpack介绍

    前端开发自动化工作流工具,JavaScript自动化构建工具grunt.gulp.webpack介绍 前端自动化,这样的一个名词听起来非常的有吸引力,向往力.当今时代,前端工程师需要维护的代码变得及为 ...

  7. Bootstrap：弹出框和提示框效果以及代码展示

    前言:对于Web开发人员,弹出框和提示框的使用肯定不会陌生,比如常见的表格新增和编辑功能,一般常见的主要有两种处理方式:行内编辑和弹出框编辑.在增加用户体验方面,弹出框和提示框起着重要的作用,如果你的 ...

  8. jiffies溢出与时间先后比较-time_after,time_before【转】

    转自:http://www.cnblogs.com/hfyinsdu/p/4600052.html 参考地址: http://blog.csdn.net/jk110333/article/detail ...

  9. hobby

    如果把战争的原则凝缩为一个词,那就是集中. 人生有三把钥匙, 接受. 改变. 离开.不能接受,那就改变,不能改变,那就离开. 少问别人为什么,多问自己凭什么. 太平自古将军定,不许将军见太平

  10. PHP最原始的上传文件函数

    <?php $upload_file=$_FILES['upload_file']['tmp_name']; $upload_file_name=$_FILES['upload_file'][' ...