javaScript：拖拽效果

最新推荐文章于 2024-08-22 14:32:34 发布

小姚学前端

最新推荐文章于 2024-08-22 14:32:34 发布

阅读量650

点赞数

分类专栏： javascript 文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.csdn.net/qq_52799985/article/details/133743603

版权

javascript 专栏收录该内容

31 篇文章 1 订阅

订阅专栏

前言

JavaScript的拖拽效果是一种常见的交互技术，它允许用户通过鼠标操作在网页中拖拽（拖动）元素。这种技术可以为网站和应用程序带来多种用途和好处，如：增强用户体验，实现拖放功能，图形设计和游戏，排序和重新排列，数据可视化，创建可自定义界面等等。总之，JavaScript的拖拽效果是一种强大的交互技术，可以提高用户体验、增加网站或应用程序的功能性，并创造更富有创意和直观的用户界面。

实现思路

获取事件对象和坐标点：

当鼠标按下时，触发 mousedown 事件。
在 mousedown 事件处理程序中，可以使用事件对象来获取鼠标点击的坐标点，通常使用 event.clientX 和 event.clientY 属性来获取鼠标相对于视窗的坐标点。

配合定位：

要实现拖拽效果，通常需要操作被拖拽的元素的位置。这可以通过设置元素的 style.left 和 style.top 属性来实现。
在 mousedown 事件处理程序中，可以记录鼠标点击时元素的初始位置（通常是元素的左上角坐标）。

鼠标事件监听：

在 mousedown 事件中，将鼠标的 mousemove 和 mouseup 事件监听器附加到 document 上。这是因为当用户按住鼠标拖动元素时，鼠标可能会离开元素，但我们仍然要捕获移动和释放事件。

拖拽过程：

在 mousemove 事件处理程序中，计算鼠标移动的距离（新坐标点与初始坐标点之间的差值）。
使用这个差值来更新元素的位置，将初始位置坐标与差值相加，并将结果分别赋给 style.left 和 style.top。
这样，元素将跟随鼠标的移动而移动。

停止拖拽：

当用户释放鼠标按钮时，触发 mouseup 事件。
在 mouseup 事件处理程序中，移除 mousemove 和 mouseup 事件监听器，以停止拖拽操作。

代码实现（代码讲解）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>拖拽效果</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        .wp {
            width: 200px;
            height: 200px;
            background: #04be02;
            position: absolute;
            left: 100px;
            top: 100px;
        }
    </style>
</head>
<body>
    <div class="wp"></div>
</body>
</html>
<script>
// 获取拖拽元素
let wp = document.querySelector('.wp')

// 当鼠标按下时
wp.onmousedown = function(){
    // 计算鼠标点击点距离元素左边和上边的距离
    let diX = event.clientX - wp.offsetLeft;
    let diY = event.clientY - wp.offsetTop;
    console.log(diX,diY);

    // 在文档上添加鼠标移动事件监听器
    document.onmousemove = function(){
        // 计算元素新的左上角坐标
        let oLeft = event.clientX - diX;
        let oTop = event.clientY - diY;
        
        // 限制元素不超出页面边界
        if (oLeft <= 0) {
            oLeft = 0;
        }
        if (oTop <= 0) {
            oTop = 0;
        }
        let maxLeft = window.innerWidth - wp.offsetWidth;
        let maxTop = window.innerHeight - wp.offsetHeight;
        if (oLeft >= maxLeft) {
            oLeft = maxLeft;
        }
        if (oTop >= maxTop) {
            oTop = maxTop;
        }
        
        // 设置元素的定位位置
        wp.style.left = oLeft + 'px';
        wp.style.top = oTop + 'px';
    }
}

// 当鼠标释放时，移除鼠标移动事件监听器，停止拖拽
document.onmouseup = function(){
    document.onmousemove = null;
}
</script>

小姚学前端

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
javaScript：拖拽效果

JavaScript的拖拽效果是一种常见的交互技术，它允许用户通过鼠标操作在网页中拖拽（拖动）元素。这种技术可以为网站和应用程序带来多种用途和好处，如：增强用户体验，实现拖放功能，图形设计和游戏，排序和重新排列，数据可视化，创建可自定义界面等等。总之，JavaScript的拖拽效果是一种强大的交互技术，可以提高用户体验、增加网站或应用程序的功能性，并创造更富有创意和直观的用户界面。
复制链接

扫一扫