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.getElementById('box');//物体

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

            //鼠标移动事件
            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;//取消鼠标移动事件
                if (o.releaseCapture) o.releaseCapture();//释放全局捕获
            };
            return false;
        };

限制拖拽的范围：

经常会要求拖拽效果不超超一定的边界，所以在物体 移动过程中应该根据物体和范围直接的关系，做一些判断才可以。

碰撞检测：

思路：找安全范围，反之就是碰撞

将被碰撞的物体的四个边计算出来，命名为L1,T1,R1和B1,同时计算物体的四个边：L2和T2、R2、B2.

R2 < L1 || B2 < T1 || L2 > R1 || T2 > B1 这四个条件有一个成立，则就是安全区域

  var o = document.getElementById('box');//物体
        var box = document.getElementById('box1');//被碰撞物体

        //鼠标按下事件
        o.onmousedown = function (e) {
            e = e || window.event;
            //获取鼠标相对于物体位置
            var disX = e.clientX - o.offsetLeft,
                disY = e.clientY - o.offsetTop;
            var maxLeft = document.documentElement.clientWidth - o.offsetWidth;//屏幕宽度-物体宽度
            var maxTop = document.documentElement.clientHeight - o.offsetHeight;//屏幕高度-物体高度
            //计算被碰撞物体的四个边界值
            var L1 = box.offsetLeft,        //左
                T1 = box.offsetTop,           //上
                R1 = L1 + box.offsetWidth,    //右
                B1 = T1 + box.offsetHeight;   //下
            //添加全局捕获
            if (o.setCapture) {
                o.setCapture();
            }

            //鼠标移动事件
            document.onmousemove = function (e) {
                e = e || window.event;//事件对象
                // console.log(e.clientX, e.clientY);//鼠标位置
                var x = e.clientX - disX;//物体left值
                var y = e.clientY - disY;//物体的top值
                //判断运动的范围
                if (x <= 0) {   //左边界
                    x = 0;
                } else if (x >= maxLeft) {
                    x = maxLeft;
                }

                if (y <= 0) {
                    y = 0;
                } else if (y >= maxTop) {
                    y = maxTop;
                }

                //判断碰撞边界
                var L2 = o.offsetLeft;
                var T2 = o.offsetTop;
                var R2 = L2 + o.offsetWidth;
                var B2 = T2 + o.offsetHeight;
                //进入碰撞区域
                if (!(R2 < L1 || B2 < T1 || L2 > R1 || T2 > B1)) {
                    box.style.background="orange";
                }else{
                    box.style.background="blue";
                }

                //修改物体的位置
                o.style.left = x + 'px';
                o.style.top = y + 'px';

            };

            //鼠标抬起事件
            document.onmouseup = function () {
                document.onmousemove = null;//取消鼠标移动事件
                if (o.releaseCapture) o.releaseCapture();//释放全局捕获
            };
            return false;
        };

二、js的运动

1.匀速运动(平滑运动)

2.减速运动(缓冲运动)

    <div id="box"> </div>
    <script>
        var o = document.getElementById('box');
        //(目标的左边距-（物体的左边距+物体宽度）)/缩放比例

        o.onclick = function () {
            var t = setInterval(function () {
                //计算速度   减速运动  速度一直在减小
                var speed = Math.ceil((1000 - o.offsetLeft - o.offsetWidth) / 100);
                o.style.left = o.offsetLeft + speed + 'px';//851+0.49      
                if (o.offsetLeft == 900) {
                    clearInterval(t);
                }
                console.log(1);
            }, 10);
        };

    </script>

3.淡入淡出

4.运动的封装

三、回调函数

回调函数：某个动作做完或某件事情执行完以后调用的函数

回调函数经常出现函数参数位置。