JavaScript 原生JS实现 ‘拖拽‘ 效果

最新推荐文章于 2024-07-10 14:36:18 发布

八百比晴明

最新推荐文章于 2024-07-10 14:36:18 发布

阅读量779

点赞数 2

分类专栏： JavaScript

本文链接：https://blog.csdn.net/m0_51981718/article/details/123961778

版权

HTML CSS JavaScript 拖拽效果事件监听

关键词由CSDN通过智能技术生成

JavaScript 专栏收录该内容

18 篇文章 0 订阅

订阅专栏

demo 1

按住鼠标进行移动的拖拽效果实现：

<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box{
    width: 100px;
    height: 100px;
    background-color: pink;
    position: absolute;
    left: 0;
    top: 0;
    cursor: move;
}
</style>
</head>
<body>
    
<div class="box"></div>

<script>
var box = document.querySelector('.box')

box.onmousedown = function (ev){
    // 鼠标按下时在box中的偏移量
    var box_offsetX = ev.offsetX
    var box_offsetY = ev.offsetY
    // 在整个文档都可以拖拽box
    document.onmousemove = function (event){
        // 鼠标在页面中的坐标
        var x = event.pageX
        var y = event.pageY
        // 计算box的定位坐标
        var box_left = x - box_offsetX
        var box_top = y - box_offsetY

        // 限制box在视口范围内拖拽
        if (box_left <= 0) {
            box_left  = 0
        }
        if (box_left >= document.documentElement.clientWidth-box.clientWidth) {
            box_left = document.documentElement.clientWidth-box.clientWidth
        }

        if (box_top <= 0) {
            box_top  = 0
        }
        if (box_top >= document.documentElement.clientHeight-box.clientHeight) {
            box_top = document.documentElement.clientHeight-box.clientHeight
        }

        // 给box重新设置定位值
        box.style.left = box_left + 'px'
        box.style.top = box_top + 'px'
    }
    // 鼠标抬起时移除mousemove事件
    document.onmouseup = function (){
        document.onmousemove = null
    }
}

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