sport
/
17.拖拽运动.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /*
            function(e)
                e相当于保留了当前的事件信息(如click,mouseover),如鼠标事件,鼠标的坐标信息.
                e指向了当前发生的事件.IE
                注: e是标准浏览器传递进去的事件参数,低版本IE不会传递.
                    低版本IE浏览器,事件参数放在window.event对象中
                所以考虑到兼容 要这样书写 e = e || window.event;

            拖拽运动：
                设置物体拖拽步骤：
                    1 onmousedown：鼠标按下事件
                    2 onmousemove：鼠标移动事件
                    3 onmouseup：鼠标抬起事件
                原理：
                    （注：移动物体一定要设置绝对定位，脱离文档流才可以移动。）
                    1、绑定拖拽的元素，移动和鼠标松开后是对document的绑定，因为移动的是整个div。
                    2、点击：a= 获取当前鼠标坐标、b =div距浏览器距离、c = 鼠标在div内部距离=a-b。
                       移动：通过  a - c 建立鼠标与div的关系，防止鼠标超出div。
                基本思路：
                    拖拽状态 = 0鼠标在元素上按下的时候{
                        拖拽状态 = 1
                        记录下鼠标的x和y坐标
                        记录下元素的x和y坐标
                        }
                    鼠标在元素上移动的时候{
                        如果拖拽状态是0就什么也不做。
                        如果拖拽状态是1，那么
                        元素y = 现在鼠标y - 原来鼠标y + 原来元素y
                        元素x = 现在鼠标x - 原来鼠标x + 原来元素x
                        }
                    鼠标在任何时候放开的时候{
                        拖拽状态 = 0
                        }

         */

        div{
            width: 100px;
            height: 100px;
            background-color: orange;
            position: absolute;
            left: 0px;
            top: 0px;
        }
    </style>
</head>
<body>
    <div id="demo"></div>
    <script>
        var oDiv = document.getElementById('demo');
        var timer = null;
        var lastX = 0;
        var lastY = 0;
        var iSpeedX = 0;
        var iSpeedY = 0;

        // 鼠标点击事件,按下后所触发的事件或连续事件
        // e.clientX 点击物体后，当前鼠标在X轴的初始位置（初始X轴坐标）
        // e.clientY 点击物体后，当前鼠标在Y轴的初始位置（初始Y轴坐标）
        // this.offsetLeft 当前物体距离浏览器边框的初始X轴位置
        // this.offsetTop  当前物体距离浏览器边框的初始Y轴位置
        // disX 鼠标在物体内部，鼠标当前位置距离物体左边框的距离
        // disY 鼠标在物体内部，鼠标当前位置距离物体上边框的距离
        // newLeft 鼠标移动物体后，物体距离浏览器边框新X轴的位置
        // newTop 鼠标移动物体后，物体距离浏览器边框新Y轴的位置
        oDiv.onmousedown = function(e){
            clearInterval(this.timer);
            var e = e || window.event;
            var disX = e.clientX - this.offsetLeft;
            var disY = e.clientY - this.offsetTop;
            var self = this;
            document.onmousemove = function(e){
                var e = e ||window.event;
                var newLeft = e.clientX - disX;
                var newTop = e.clientY - disY;
                iSpeedX = newLeft - lastX;
                iSpeedY = newTop - lastY;
                lastX = newLeft;
                lastY = newTop;

                // 测试 运动轨迹
                //  var oSpan = document.createElement('span');
                //  oSpan.style.position = 'absolute';
                //  oSpan.style.left = newLeft + 'px';
                //  oSpan.style.top = newTop + 'px';
                //  oSpan.style.width = '5px';
                //  oSpan.style.height = '5px';
                //  oSpan.style.backgroundColor = 'black';
                //  document.body.appendChild(oSpan);

                self.style.left = newLeft + 'px';
                self.style.top = newTop + 'px';
            }
            oDiv.onmouseup = function(){
                document.onmouseup = null;
                document.onmousemove = null;
                startMove(self, iSpeedX, iSpeedY);

            }
        }


        var startMove = function(dom, iSpeedX, iSpeedY){
            clearInterval(dom.timer);

            var g = 3,
                u = 0.8;

            dom.timer = setInterval(function(){

                iSpeedY += g;
                var newTop = dom.offsetTop + iSpeedY;
                var newLeft = dom.offsetLeft + iSpeedX;
                if( newTop >= document.documentElement.clientHeight - dom.clientHeight){
                    iSpeedY *= -1;
                    iSpeedX *= u;
                    iSpeedY *= u;
                    newTop = document.documentElement.clientHeight - dom.clientHeight;
                }
                if( newTop <= 0){
                    iSpeedY *= -1;
                    iSpeedX *= u;
                    iSpeedY *= u;
                    newTop = 0;
                }
                if( newLeft >= document.documentElement.clientWidth - dom.clientWidth){
                    iSpeedX *= -1;
                    iSpeedX *= u;
                    iSpeedY *= u;
                    newLeft = document.documentElement.clientWidth - dom.clientWidth;
                }
                if( newLeft <= 0){
                    iSpeedX *= -1;
                    iSpeedX *= u;
                    iSpeedY *= u;
                    newLeft = 0;
                }

                if( Math.abs(iSpeedX) < 1){
                    iSpeedX = 0;
                }
                if( Math.abs(iSpeedY) < 1){
                    iSpeedY = 0;
                }
                if( iSpeedY == 0 && iSpeedX == 0 && newTop == document.documentElement.clientHeight - dom.clientHeight){
                    clearInterval(dom.timer);
                    // alert('over');
                }else{
                    dom.style.top = newTop + 'px';
                    dom.style.left = newLeft + 'px';
                }
            },30)


        }
    </script>
</body>
</html>