JavaScript鼠标拖拽和JS运动

笔记

一、拖拽效果

分析思路：

• 鼠标需要按下 mousedown
• 鼠标移动过程中，物体随着鼠标的移动而移动 mousemove
• 鼠标抬起时，物体停止移动 mouseup

注意：

1.鼠标按下事件添加给物体，鼠标移动和抬起都应该添加页面

2.鼠标相对于物体的位置

var o = document.getElementById('box');//物体

        //鼠标按下事件
        o.onmousedown = function (e) {
   
            e = e || window.event;
            //获取鼠标相对于物体位置
            var disX = e.clientX - o.offsetLeft,
                disY = e.clientY - o.offsetTop;

            //鼠标移动事件
            document.onmousemove = function (e) {
   
                e = e || window.event;//事件对象
                console.log(e.clientX, e.clientY);//鼠标位置
                //修改物体的位置
                o.style.left = e.clientX -disX + 'px';
                o.style.top = e.clientY -disY + 'px';
            };

            //鼠标抬起事件
            document.onmouseup = function () {
   
                document.onmousemove = null;//取消鼠标移动事件
                console.log('哈哈哈');
            };
        };

拖拽遇到的问题：

1.如果拖拽的地方有文字并且在拖拽div的时候，文字是被选中的状态，浏览器会认为是拖拽文字。

2.当被拖拽的目标是图片时，拖拽效果也不正确。默认情况下，图片是可以被拖动。

总结：拖拽效果与浏览器的默认行为产生冲突。

阻止浏览器的默认行为：return false即可。但是，这种做法低版本IE浏览器不支持。想解决这个问题(取消低版本IE浏览器的拖拽默认行为)，需要使用全局捕获。

全局捕获(低版本IE支持)：

为节点对象添加捕获之后，会捕获页面中的所有的事件(其它元素触发的时候，也会被该节点捕获)

• setCapture() 添加捕获
• releaseCapture() 释放捕获

 var o = document.