公司研发一个新的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. 动态LOV语句、向具有LOV的ITEM赋值时报FRM-40212需要验证错误

    网上解决方法: http://www.itpub.net/thread-845812-2-1.html http://blog.csdn.net/rfb0204421/article/details/ ...

  2. zw版【转发·台湾nvp系列Delphi例程】HALCON SetLineStyle1

    zw版[转发·台湾nvp系列Delphi例程]HALCON SetLineStyle1 procedure TForm1.Button1Click(Sender: TObject);var img : ...

  3. php使用过滤器filter_var轻松验证邮箱url和ip地址等

    以前使用php的时候还不知道有过滤器filter这玩意,那时候判断邮箱.url和ip地址格式是否符合都是用正则表达式.后来随着使用的逐渐深入,才知道在php中也可以使用内置的函数库过滤器filter来 ...

  4. SQl中drop与truncate的区别

    在对SQL的表操作时,我们因不同的需求做出相应的操作. 我来对比一下truncate table '表明'与drop table '表格名'的区别,跟大家一起学习. drop table '表格名'- ...

  5. XAMPP和Bugfree详细教程

    一.XAMPP安装配置 xampp是一款跨平台的集成 apache + mysql + php环境,是的配置AMP服务器变得简单轻松,支持windows,solaris, 下载地址:http://so ...

  6. 关于学习keynote

    下午在学习如何用keynote写出高大上的文档,看到公司内的一个妹纸洋洋洒洒的写了好多篇文章,顿时觉得自己的知识面狭窄,文科女和理科女的差别,从我嘴里半天吐不出一个富有诗情画意的词句来,那么还是脚踏实 ...

  7. javaWeb 使用jsp开发 if else 标签

    1.jsp页面调用代码 <t:choose> <t:when test="${user==null }">还没有登录</t:when> < ...

  8. 深入研究java.lang.Runtime类【转】

    转自:http://blog.csdn.net/lastsweetop/article/details/3961911 目录(?)[-] javalang 类 Runtime getRuntime e ...

  9. Linux Runtime PM介绍【转】

    转自:http://blog.csdn.net/wlwl0071986/article/details/42677403 一.Runtime PM引言 1. 背景 (1)display的需求 (2)系 ...

  10. CSS选择器无法找到td

    .table >  tr > td  <----这样无法找到td 因为table在浏览器下会自动生成tbody,这样即可 .table > tbody > tr > ...