拖拽

拖拽box1元素

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

//获取box1
var box1 = document. getElementById("box1");
//为box1绑定一个鼠标按下事件
//当鼠标在被拖拽元素上按下时，开始拖拽onmousedown
box1.onmousedown = function(){
//为document绑定一个onmousemove事件
    document.onmousemove = function(event){
        event = event||window.event;
//当鼠标移动时被拖拽元素跟随鼠标移动onmousemove
//获取鼠标的坐标
        var left = event.clientX;
        var top = event.clientY;
        
        //为元素绑定一个鼠标松开事件
document.onmouseup = function(){
//当鼠标松开时，被拖拽元素固定在当前位置onmouseup
//取消document的onmous emove事件
doc ument.onmousemove = null;
doc ument.onmouseup = null;
    //当鼠标松开时，取消对事件的捕获
box1.releaseCapture();
};
return false;
};
};

每次拖拽时，box左上角都会与鼠标对齐，所以需要进行优化

计算鼠标与box接触时的位置，与box左上角的位置，

//为box1绑定一个鼠标按下事件
//当鼠标在被拖拽元素上按下时，开始拖拽onmousedown
box1. onm ousedown = function(event){
event = event||window.event ;
//div的偏移量鼠标.clentX -元素.offsetLeft
//div的偏移量鼠标.clentY -元素.offsetTop
var ol = event.clientX - box1.offsetLeft;
var ot = event.clientY - box1.offsetTop;
//为document绑定一个onmousemove事件
document.onmousemove = function(event){
event = event|| window.event;
//当鼠标移动时被拖拽元素跟随鼠标移动onmousemove
//获取鼠标的坐标
var left = event.clientX - ol;
var top = event.clientY - ot;
//修改box1的位置
box1.style.left = left+"px";
box1.style.top = top+"px";
};

当我们拖拽一个网页中的内容时，浏览器会默认去搜索引擎中搜索内容，
此时会导致拖拽功能的异常，这个是浏览器提供的默认行为，
如果不希望发生这个行为，则可以通过return false来取消默认行为

但是，对IE8无效