1.拖拽动作流程：

          1、脱离文档流

          2、鼠标相关动作，作用域，光标

                a、鼠标按下   待拖动元素    光标在事件源元素中坐标

                b、鼠标移动    document      光标在窗口中坐标，与其在事件源元素中坐标进行运算，计算事件源元素定位位置，定位元素

                c、鼠标弹起    document       移除鼠标移动事件监听

          3.计算容器宽高：

                element.clientWidth：包括边框内部的宽度，去掉滚动条宽度

                element.clientHeight：包括边框内部的高度

                element.offsetWidth：包括边框及内部的宽度

                element.offsetHeight：包括边框及内部的高度

           4.计算窗口宽高：

                  document.documentElement.clientWidth || document.body.clientWidth

                  document.documentElement.clientHeight || document.body.clientHeight

           5.常见默认行为：

                  1、点击超级链接进行跳转

                  2、点击<input type=”submit”>按钮进行表单元素提交

                  3、点击右键弹出右键快捷菜单

                  4、页面上元素不允许拖动

                   …………

          6.阻止默认行为：

               1、标准：

                     event.preventDefault();

               2、非标准（IE9）：

                    event.returnValue=false;

           7.元素在文档中的定位

                  element.offsetLeft：距其有定位父元素的左边沿间距

                  element.offsetTop：距其有定位父元素的上边沿间距

                  element.offsetParent：获取元素最近有定位的祖先元素

2.存储：

       会话跟踪:

             1、是web程序中常用的技术，用来跟踪用户的整个会话

             2、为什么需要：

                      a、一个用户的所有请求都属于同一个会话

                      b、不同用户的请求属于不同的会话

            3、常用技术：cookie与session

   1.cookie:

               1、作用：客户端解决方案，本地数据存储

               2、内容：文本字符串（用户名、密码……）

               3.缺点：

                           1、形式：明文形式存储（不安全）

                           2、会占用上传带宽

                           3、存储容量最大为4KB

               4.cookie的设置及发送过程：

                     1、客户端发送http请求到服务器端

                     2、服务器端发送http响应到客户端，其中包括Set-Cookie头部

                     3、客户端发送http请求到服务器端，其中包括Cookie头部

                     4、服务器端发送http响应到客户端

               5.cookie语法：

                     保存操作：

                              document.cookie=”key=value;expires=xxxx；path=/”;

                               key=value：保存的cookie名与cookie值，都是字符串内容。

                               expires：失效时间，是日期时间格式的字符串，使用        dataObject.toUTCString()方法进行转换。若不设置，        则会话结束，cookie失效。

                              path：cookie保存路径，即访问作用域，若整个网站中都能    够访问这条保存的cookie，通常将path设置为/。

                              domain：域名

                              secure：安全链接

                      修改操作:

                           覆盖保存，保持cookie名与路径相同的情况下，修改  cookie保存。

                       删除操作：

                           覆盖保存，保持cookie名与路径相同的情况，将失效时   间设置为当前系统时间。

                      查询操作：

                            document.cookie来获取当前目录下的所有cookie

       2.session:

                   1、服务器端会话跟踪,每一次浏览器用户发起新的资源请求，会在服务器申请一个空间存放产生的唯一标识sessionID，以后每一次同一用户再次请求该资源时，查找是否存在该ID，若存在，则无需再次验证，若不存在，则需再次验证

sessionID存储于服务端的cookie文件当中。

                   2.session的生命周期：

                        1、存在于内存中且独立，在第一次访问服务器时自动创建

                        2、只要用户访问，无论是否读写Session，服务器都更新最后访问时间

                        3、可以设置有效时间，超出时间未访问过服务器，则session失效

        3.webStorage:

                   1、HTML5本地存储的解决方案之一

                   2、存在意图：在于解决本来不应该cookie做却不得不用cookie做的的本地存储

                   3、API：localStorage和sessionStorage

                   4.localStorage:

                              1、数据永久存储，除非刻意删除或设置浏览器配置来删除

                              2、作用域：文档源级别，文档源是通过协议、主机名端口三者来确定的。同源的文档共享同样的localStorage数据。它们可以互相读取对方的数据，甚至可以覆盖对方的数据

                             3.属性方法：

                                     1.获取localStorage的长度：window.localStorage.length

                                     2.添加/编辑localStorage的内容：window.localStorage.setItem(键,值);

                                     3.根据对应的索引去获取对应localStorage的key的值：window.localStorage.key(索引);

                                     4.根据对应的key获取对应的的value：window.localStorage.getItem(key);

                                     5.清空同源的本地存储数据：window.localStorage.clear();

                   5.sessionStorage:

                            1、数据临时存储，一旦窗口或标签页关闭，存储数据就被删除

                            2、作用域：窗口级别，如果同源的文档渲染在不同的浏览标签页中，那么它们互相之间拥有的是各自的sessionStorage数据，无 法共享；一个标签页中的脚本是无法读取或覆盖另一个标签页脚本写入的数据。哪怕这两个标签渲染的是同一个页面，运行的是同一个脚本。即仅对某个会话有效。