拖拽抛物动画bug怎么解决?

html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>js抛物动画</title>
    <link rel="stylesheet" href="css/reset.min.css">
    <style>
 html, body {
            height: 100%;
 overflow: hidden;
 }

        #box1, #box2, #box3 {
            position: absolute;
 width: 150px;
 height: 150px;
 cursor: move;
 z-index: 0;
 }

        #box1 {
            top: 100px;
 left: 100px;
 background: lightcoral;
 }

        #box2 {
            top: 200px;
 left: 400px;
 background: lightgreen;
 }

        #box3 {
            top: 50px;
 left: 50px;
 background: orange;
 }
    </style>
</head>
<body>
<div id="box1"></div>
<div id="box2"></div>
<div id="box3"></div>
<script src="js/subscribe.js"></script>
<script src="js/drag.js"></script>
<script>
 let drag1 = new Drag(box1),
 drag2 = new Drag(box2),
 drag3 = new Drag(box3);
 let change = function change(curEle) {
        let divs = document.querySelectorAll("div");
 [].forEach.call(divs, function (item) {
            item.style.zIndex = 0;
 });
 curEle.style.zIndex = 1;
 };
 drag1.subDown.add(change);
 drag2.subDown.add(change);
 drag3.subDown.add(change);

 let computedFly = function computedFly(curEle) {
        if (!curEle.lastFly) {
            curEle.lastFly = curEle.offsetLeft;
 curEle.speedFly = 0;
 return;
 }
        curEle.speedFly = curEle.offsetLeft - curEle.lastFly;
 curEle.lastFly = curEle.offsetLeft;
 }
    drag1.subMove.add(computedFly);
 drag2.subMove.add(computedFly);
 drag3.subMove.add(computedFly);

 let stopAnimate = function stopAnimate(curEle) {
        clearInterval(curEle.flyTimer);
 curEle.speedFly = undefined;
 clearInterval(curEle.dropTimer);
 };
 drag1.subDown.add(stopAnimate);
 drag2.subDown.add(stopAnimate);
 drag3.subDown.add(stopAnimate);

 let animateFly = function animateFly(curEle) {
        let minL = 0,
 maxL = document.documentElement.clientWidth - curEle.offsetWidth;
 let speed = curEle.speedFly,
 dir = "right";
 speed < 0 ? dir = "left" : null;
 speed = Math.abs(speed);
 curEle.flyTimer = setInterval(() => {
            if (speed < 0.5) {
                clearInterval(curEle.flyTimer);
 return;
 }
            speed *= 0.98;
 let curL = curEle.offsetLeft;
 if (dir === "right") {
                if (curL >= maxL) {
                    curEle.style.left = maxL + "px";
 dir = "left";
 return;
 }
                curL += speed;
 } else {
                if (curL < minL) {
                    curEle.style.left = minL + "px";
 dir = "right";
 return;
 }
                curL -= speed;
 }
            curEle.style.left = curL + "px";
 }, 17);
 }
    drag1.add(animateFly);
 drag2.add(animateFly);
 drag3.add(animateFly);

 let animateDrop = function animateDrop(curEle) {
        let speed = 9.8,
 minT = 0,
 maxT = document.documentElement.clientHeight - curEle.offsetHeight,
 flag = 0;
 curEle.dropTimer = setInterval(() => {
            if (flag > 1) {
                clearInterval(curEle.dropTimer);
 return;
 }
            speed +=10;
 speed-=0.98;
 let curT = curEle.offsetTop;
 curT+=speed;
 if(curT>=maxT){
                curEle.style.top=maxT+"px";
 speed*=-1;
 flag++;
 return;
 }
            if(curT<=minT){
                curEle.style.top=minT+"px";
 speed*=-1;
 return;
 }
            curEle.style.top =curT+"px";
 flag =0;
 }, 17)
    }
    drag1.add(animateDrop);
 drag2.add(animateDrop);
 drag3.add(animateDrop);


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

subscribe.js

~function anonymous(window) {
    class Subscribe {
        constructor() {
            this.pond = [];
        }

        add(fn) {
            let pond = this.pond,
                isExist = false;
            pond.forEach(item=>item === fn ? isExist = true : null);

            !isExist ? pond.push(fn) : null;

        }

        remove(fn) {
            let pond = this.pond;
            pond.forEach((item,index)=>{
                if (item===fn){
                    pond[index]=null;
                }
            })
        }

        fire(...arg) {
            let pond = this.pond;
            for(let i=0;i<pond.length;i++){
                let item=pond[i];
                if (item===null){
                    pond.splice(i,1);
                    i--;
                    continue;
                }
                item(...arg);
            }
        }

    }
    window.Subscribe = Subscribe;
}(window);

drag.js

~function anonymous() {
    if (typeof Subscribe==='undefined') {{
        throw new ReferenceError("不能没有订阅工具插件");
    }

    }
    class Drag extends Subscribe {
        constructor(ele) {
            super();
            this.ele = ele;
            ['strX', 'strY', 'strL', 'strT', 'curL', 'curT'].forEach(item=> {
                this[item] = null;
            });
            this.subDown = new Subscribe;
            this.subMove = new Subscribe;

            this.DOWN = this.down.bind(this);
            this.ele.addEventListener('mousedown', this.DOWN);
        }

        down(ev) {
            ev.preventDefault();
            let ele = this.ele;
            this.strX = ev.clientX;
            this.strY = ev.clientY;
            this.strL = ele.offsetLeft;
            this.strT = ele.offsetTop;
            this.MOVE = this.move.bind(this);
            this.UP = this.up.bind(this);
            document.addEventListener('mousemove', this.MOVE);
            document.addEventListener('mouseup', this.UP);
            this.subDown.fire(ele,ev);
        }

        move(ev) {
            ev.preventDefault();
            let ele = this.ele;
            this.curL = ev.clientX - this.strX + this.strL;
            this.curT = ev.clientY - this.strY + this.strT;
            ele.style.left = this.curL + "px";
            ele.style.top = this.curT + "px";
            this.subMove.fire(ele,ev);

        }

        up(ev) {
            ev.preventDefault();
            document.removeEventListener('mousemove', this.MOVE);
            document.removeEventListener('mouseup', this.UP);
            this.fire(this.ele,ev);
        }

    }
    window.Drag = Drag;
}();

这个demo有个bug: 就是在下坠抛物期间长按鼠标捕获移动中的元素时. 鼠标按下并移动快的时候,有时候会出现一个"禁止"的鼠标指针. 然后这个元素在按下鼠标时就跟鼠标黏贴住了.抬起鼠标后这个元素会不停的上下高速移动,按下鼠标后,又黏贴鼠标.并且如果多试几遍去操作另外那两个元素的话.另外那两个元素也会出现同样的bug现象,同时黏住鼠标,撒开鼠标就上下高速运动. 请帮忙看看什么问题,谢谢!!

天天向上学

浏览 803回答 2

2回答

随时随地看视频慕课网APP