事件的拖拽一

/*
* 拖拽的流程
* 1、当鼠标在被拖拽元素上按下时，开始拖拽 onmousedown
* 2、当鼠标移动时被拖拽元素跟随鼠标移动onmousemove
* 3、当鼠标松开时，被拖拽函数固定在当前位置 onmouseup
*/

具体实现流程：

　　　　　　　　　　//获取box1
                box1 = document.getElementById("box1");
                //为box1绑定按下事件
                box1.onmousedown = function(){
                    //为document绑定一个移动元素,这样子我鼠标放在任何地方都可以，如果给box1绑定，只有放box才可以。
                    document.onmousemove = function(event){
                        //兼容性
                        event = event || window.event;
                        //获取鼠标的坐标
                        var left = event.clientX;
                        var top = event.clientY;
                        //修改div的坐标
                        box1.style.left = left + "px";
                        box1.style.top = top + "px";
                        //为docment绑定一个1onmouseup，不能为div绑定，如果有多一个div的话
                        //移动到下一个div同位置的话，释放鼠标是没有释放事件的，因为作用于另外一个div了
                        //所以要绑定docment对所有的都有用。
                        //当鼠标松开的时候，就取消移动事件和松开事件
                        document.onmouseup = function(){
                            document.onmousemove = null;
                            document.onmouseup = null;
                        }
                    }
                    
                }