实现拖拽案例（内附源码）

最新推荐文章于 2025-09-15 14:21:27 发布

原创

最新推荐文章于 2025-09-15 14:21:27 发布 · 484 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #ecmascript #html #css

该博客介绍了一个使用HTML、CSS和JavaScript实现的拖拽盒子效果。通过设置CSS的`position: absolute`使元素脱离文档流，然后利用JavaScript获取元素宽高并绑定鼠标事件来跟踪鼠标移动，确保元素在浏览器可视窗口内移动且不超出边界。详细步骤包括鼠标按下、移动和抬起事件的处理，并提供了完整源码。

案例简介：

这的案例主要实现的是一个盒子鼠标点击在上面并移动时盒子跟着鼠标在浏览器可视窗口内移动，不能超出游览器可视窗口！

效果展示：

代码实现：

1.首先使用html+css写出基本框架，要想使box能移动就需要box脱离文档流，所以给box设置position: absolute属性。

<!DOCTYPE html>
<html lang="en">

<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>
        * {
            margin: 0;
            padding: 0;
        }

        html,
        body {
            width: 100%;
            height: 100%;
        }

        .box {
            width: 200px;
            height: 200px;
            position: absolute;
            background-color: hotpink;
            cursor: move;
        }
    </style>
</head>