事件拖拽

**

事件拖拽

**

例如利用鼠标对一个盒子进行拖拽移动位置：

用到的事件有：
onmousemove 鼠标移动
onmousedown 鼠标按下
onmouseup 鼠标松开

事件对象的event：
event.clientX 获取鼠标的X轴
event.clientY 获取鼠标的Y轴

例：对一个div进行拖拽：

window.onload = function () {
            var box = document.getElementById('box');
            box.onmousedown = function (event) {
                event = event || window.event;
                var leftX = event.clientX - box.offsetLeft;//offsetLeft作用求盒子左边到页面的距离，鼠标x轴—盒子左边距离就是鼠标相对与盒子的x坐标
                var topX = event.clientY - box.offsetTop;
                document.onmousemove = function (event) {
                    event = event || window.event;
                    var x = event.clientX;
                    var y = event.clientY;
                    box.style.top = (y - topX) + 'px';
                    box.style.left = (x - leftX) + 'px';
                }
                document.onmouseup = function () {//这里注意对象是document，这样我们才可以在全局页面下进行实现鼠标松开事件
                    document.onmousemove = null;
                    document.onmouseup = null;//将鼠标松开事件取消，这样就可以实现在我们通过操作box才可以
                }
            };

        }

但是这个例子存在一定的问题！！
以下为相关问题的处理

相关问题处理：

鼠标在拖拽盒子时，鼠标点击哪，鼠标就在哪，不会自动变化原理位置的问题解决：
通过获取鼠标的X轴和Y轴分别减去盒子左边距离和上边距离，结果为鼠标在盒子内离左边和上边的距离
获取盒子外左边的距离为：盒子名.offsetLeft
获取盒子外上边的距离： 盒子名.offsetTop

将鼠标X轴和Y轴的结果 减去 鼠标盒子盒子内离左边和上边的距离 结果就是鼠标点击拖拽哪 鼠标的不会发生位置的变化

在利用Ctrl + A 全选后，进行拖拽出现全部内容都进行了拖拽，出现阴影的问题解决：
在结尾添加 return flase； 但是IE8及一下不会起作用
那么我们就对IE浏览器添加对鼠标按下相关事件进行捕获：
对象名.setCapture(); 这个方法就是对鼠标按下相关事件进行捕获：
当鼠标松开对事件取消捕获：(在鼠标松开时，对事件进行添加)
对象名.releaseCapture();