公司研发一个新的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. getResource().getPath()返回的路径空格变成了 %20

    this.getClass().getResource(“/”).getPath()使用者方法查看文件在服务器上的地址,但是地址中的空格会被转化为%20. 解决办法1: URI uri = new U ...

  2. [CentOS] 打造vim环境

    安装vim yum install vim-enhanced 安装git rpm -Uvh http://mirrors.ustc.edu.cn/fedora/epel/6/x86_64/epel-r ...

  3. android提示框

    // 对话框 AlertDialog.Builder builder = new Builder(MainActivity.this); builder.setMessage("是否确认删除 ...

  4. linux设备驱动归纳总结（三）：4.ioctl的实现【转】

    本文转载自:http://blog.chinaunix.net/uid-25014876-id-59419.html linux设备驱动归纳总结(三):4.ioctl的实现 一.ioctl的简介: 虽 ...

  5. scala 隐式转换

    先参考这篇文章:http://www.jianshu.com/p/a344914de895 package com.test.scalaw.test /** * scala隐式转换 */ object ...

  6. Ubuntu 下配置ftp服务端

    安装sudo apt-get install pure-ftpdsudo netstat –ano | grep “21”查看21端口是否已开启.完成安装后,就可以用Ubuntu系统的用户名和密码登陆 ...

  7. IIS7.5真变态，服务器时间格式导致不生成WebResource.axd

    把时间调成HH:mm格式后,IIS不生成WebResource.axd了,,,从凌晨一点弄到现在......

  8. 通过SQL Server Profiler来监视分析死锁

    在两个或多个SQL Server进程中,每一个进程锁定了其他进程试图锁定的资源,就会出现死锁,例如,进程process1对table1持有1个排它锁(X),同时process1对table2请求1个排 ...

  9. Intellij IDEA

    http://1358440610-qq-com.iteye.com/blog/2102195

  10. PHP array_column() 函数

    定义和用法 array_column() 返回输入数组中某个单一列的值. array_column(array,column_key,index_key); 参数 描述 array 必需.规定要使用的 ...