在写这篇文章之前我一直在纠结一个问题，那就是以前实现的拖动拖快了总会有一些卡顿，脱节，不流畅，只能轻轻的小心翼翼的慢慢的拖拽，这样就失去了web页面中窗口拖动的意义，所以在这儿我分享出来和大家一起共同进步。
首先说一下javascript+div拖动的原理：
1.要拖动必然要触发3个事件，鼠标左键按下去（onmousedown）, 移动鼠标（onmousemove）, 释放鼠标左键（onmouseup）.
2.拖动之前必须要对目标对象（也就是需要拖动的div）进行初始化事件绑定，下面代码里面会详细介绍
3.下面就是拖动的详细步骤了，首先也拖动对象绑定一个onmousedown事件函数，这个事件函数里面控制一个状态，是否准备好拖动，获取拖动对象的坐标位置（这个坐标位置是相当于浏览器的）。然后在给document对象绑定onmousemove, 在onmousemove事件里面做捕获鼠标的坐标，让拖动对象的位置跟随鼠标的位置，重儿就实现了拖动。但拖到一定的位置总得停下来吧， 好，这个onmouseup事件处理函数就用上了，在这个事件函数里面只做一个事，那就是把拖动状态改为拖动停止。最后一点说说为什么要把onmousemove事件函数绑定在document上面而不是拖动对象上，如果是绑定在拖动对象上面就会出现本文开头说的卡顿， 脱节，不流畅，反正就是有各种不和谐因素。原因我也不是很明白，我想可能跟浏览器内部实现机制有关嘛， 如果有哪位大神知道请不吝赐教。
下面是源码，都很简单，我不是用javascript对象的方式去封装的，只要有一些简单的javascript，dom, css知识的都能看懂， 还有本人是第一次写博客，还请各位看官多提意见多多拍砖。
2 <html xmlns="http://www.w3.org/1999/xhtml">
3 <head>
4
5 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
6 <title>drag</title>
7
8 <script type="text/javascript" language="javascript">
9 window.onload = function() {
10 var drag = document.getElementById("box");
11 var x = 0, //初始化拖放对象的x坐标
12 y = 0, //初始化拖放对象的y坐标
13 isMove = false; //初始化拖放对象的状态， false停止移动，true开始移动
14 //开始移动
15 drag.onmousedown = function(e) {
16 isMove = true;
17 var evt = e || window.event;
18 //获取鼠标的位置，兼容多浏览器
19 x = evt.pageX ? evt.pageX : evt.clientX;
20 y = evt.pageY ? evt.pageY : evt.clientY;
21 x -= this.getBoundingClientRect().left; //获取拖动对象的x坐标
22 y -= this.getBoundingClientRect().top; //获取拖动对象的y坐标
23
前不就公司项目要求做一个比较蛋疼的布局，类似于window xp桌面图片布局方式，而且要求尽量不要用嵌入js脚本，用纯div+css布局，在不断探索和摸索下也只现实了IE8+,firfox, chrome浏览器，别的不多说，直接上代码。
2 <html xmlns="http://www.w3.org/1999/xhtml">
3 <head>
4 <meta charset="utf-8"/>
5 <title>window xp桌面图标布局</title>
6 <style>
7 html,body{ margin:0; border:0; padding:0; width:100%; height:100%; }
8 .parent{ display:block; background:gray; width:100%; height:100%; }
9 .parent{
10 -webkit-column-width:100px;
11 -moz-column-width:100px;
12 -webkit-column-gap:0px;
13 -moz-column-gap:0px;
14 }
15 .parent{ writing-mode: tb-lr; }/*ie8 竖直排列*/
16 .parent{ *white-space:nowrap;}
17
18 .child{
19 display:inline-block;
20 *display:inline;
21 margin:10px 10px 10px 10px;
22 border:5px solid black;
23 padding:5px;
24 width:50px;
25 height:
JS的Fibonacci
(function(m){
(function c(n){console.log(f(n)); n>0&&c(n-1);})(m);
function f(n) {
return (n==0||n==1)? (n==0?0:1): (f(n-1)+f(n-2));
}
})(25);