纯JavaScript写界面小方块的拖曳——五个版本逐步增强

发布于：2022-07-25 ⋅ 阅读:(327) ⋅ 点赞:(0)

小方块的拖曳

版本一

<style>
    div{
        width: 50px;
        height: 50px;
        background-color: red;
        position: absolute;
        left: 0;
        top: 0;
    }
</style>
</head>
<body>
<div></div>

<script>
    var div = document.querySelector('div')
    div.addEventListener('mousedown',mouseHandler)
    /*鼠标按下去的时候，侦听鼠标移动释放 */
    function mouseHandler(e){
        document.onmousemove = function(e1){
        /*e.offsetX e.offsetY 鼠标按下时相对自身左上角距离  e是按下时的事件对象*/
        /*e1.clientX e1.clientY 鼠标相对视口的距离   e1是移动时的事件*/
            /* 相对与视口左上角的距离-相对于自身左上角的位置 */
            div.style.left = e1.clientX-e.offsetX+'px';
            div.style.top = e1.clientY-e.offsetY+'px';

        }
        // 当鼠标释放时，清除移动事件和释放事件
        document.onmouseup = function(e2){
            document.onmousemove = null;
            document.onmouseup = null;
        }              
    }
    
</script>

版本二

var offsetX = 0;
var offsetY = 0;
var div = document.querySelector('div')
div.addEventListener('mousedown',mouseHandler)
/*鼠标按下去的时候，侦听鼠标移动释放 */
function mouseHandler(e){
    document.addEventListener('mousemove',mousemoveHandler);
    document.addEventListener('mouseup',mouseupHandler);
    offsetX = e.offsetX;
    offsetY = e.offsetY;

}
function mousemoveHandler(e){
    div.style.left = e.clientX-offsetX+'px';
    div.style.top = e.clientY-offsetY+'px';

}
function mouseupHandler(e){
    document.removeEventListener('mousemove',mousemoveHandler)
    document.removeEventListener('mouseup',mouseupHandler)
}

版本三

var offsetX = 0;
var offsetY = 0;
var div = document.querySelector('div')
div.addEventListener('mousedown',mouseHandler)
/*鼠标按下去的时候，侦听鼠标移动释放 */
function mouseHandler(e){
    if(e.type === 'mousedown'){
        offsetX = e.offsetX;
        offsetY = e.offsetY;
        document.addEventListener('mousemove',mouseHandler);
        document.addEventListener('mouseup',mouseHandler);
    }else if(e.type === 'mousemove'){
        div.style.left = e.clientX-offsetX+'px';
        div.style.top = e.clientY-offsetY+'px';
    }else if(e.type === 'mouseup'){
        document.removeEventListener('mousemove',mouseHandler)
        document.removeEventListener('mouseup',mouseHandler)
    }
}

版本四

<script>
    var div = document.querySelector('div')
    div.addEventListener('mousedown',mouseHandler)
    /*鼠标按下去的时候，侦听鼠标移动释放 */
    function mouseHandler(e){
        if(e.type === 'mousedown'){
            document.offsetX = e.offsetX;
            document.offsetY = e.offsetY;
            document.addEventListener('mousemove',mouseHandler);
            document.addEventListener('mouseup',mouseHandler);
        }else if(e.type === 'mousemove'){
            div.style.left = e.clientX-this.offsetX+'px';
            div.style.top = e.clientY-this.offsetY+'px';
        }else if(e.type === 'mouseup'){
            document.removeEventListener('mousemove',mouseHandler)
            document.removeEventListener('mouseup',mouseHandler)
        }
    }
</script>

多个div拖曳

<div></div>
<div></div>
<div></div>
<div></div>

<script>
    var divs = document.querySelectorAll('div')
    for(var i=0;i<divs.length;i++){
        divs[i].addEventListener('mousedown',mouseHandler)
    }
    
   
    /*鼠标按下去的时候，侦听鼠标移动释放 */
    function mouseHandler(e){
        if(e.type === 'mousedown'){
            document.offsetX = e.offsetX;
            document.offsetY = e.offsetY;
            document.div = this
            document.addEventListener('mousemove',mouseHandler);
            document.addEventListener('mouseup',mouseHandler);
        }else if(e.type === 'mousemove'){
            e.preventDefault();
            this.div.style.left = e.clientX-this.offsetX+'px';
            this.div.style.top = e.clientY-this.offsetY+'px';
           
        }else if(e.type === 'mouseup'){
            document.removeEventListener('mousemove',mouseHandler)
            document.removeEventListener('mouseup',mouseHandler)
        }
    }
</script>

网站公告

今日签到

点亮在社区的每一天
去签到

热门文章

最新发布