首页 > 其他 > 详细

拖拽效果

时间:2019-08-23 21:44:40      阅读:78      评论:0      收藏:0      [点我收藏+]

html

<div id="ball"></div>

css

#ball{width: 100px; height: 100px; background: blue; border-radius: 50%; position: absolute;}

js

        function $elem(id){
            return document.getElementById(id);
        }

        let [enbleMove, ballOffsetX, ballOffsetY] = [false, 0, 0];
        //鼠标按下
        $elem('ball').addEventListener(
            'mousedown', e=>{
                [enbleMove, ballOffsetX, ballOffsetY] = [true, e.offsetX, e.offsetY];
                e.target.style.cursor = 'move';
            }
        );
        //鼠标移动
        window.addEventListener(
            'mousemove', e=>{
                if(enbleMove){
                    $elem('ball').style.top = (e.clientY - ballOffsetY) + 'px';
                    $elem('ball').style.left = (e.clientX - ballOffsetX) + 'px';
                }
            }
        );
        //鼠标弹起
        $elem('ball').addEventListener(
            'mouseup', e=>{
                enbleMove = false;
                e.target.style.cursor = 'default';
            }
        );

拖拽效果

原文:https://www.cnblogs.com/debug/p/11402466.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!