最简单的JS网页拖动块练习（html+css+js实现，vscode编辑器实现）

本文链接：https://blog.csdn.net/qq_41898763/article/details/105008236

这篇博客介绍了如何使用HTML、CSS和JavaScript（或TypeScript）实现一个简单的网页拖动块功能。首先，讨论了学前准备，包括HTML、CSS、JS基础和VSCode编辑器的使用。接着，详细阐述了HTML骨架的构建，CSS样式的设定，以及在JavaScript中创建并操作div元素以实现拖动效果。在修复过程中，解决了鼠标位置始终位于左上角的bug，通过跟踪div的top和left偏移量的变化来实现平滑拖动。最后提供了完整的HTML和JS代码示例。

摘要由CSDN通过智能技术生成

最简单的JS网页拖动块练习（html+css+js实现，vscode编辑器实现）

学前准备

1.HTML，CSS ，JS基础
2.一点点typescript的基础（也可以没有，不影响）
3.vscode 编辑器（我本人用的是这个编辑器，推荐使用）

HTML+CSS部分

1.编写HTML骨架

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>我的第一个ts应用</title>
</head>
<body>
    <script src="main.ts"></script>
</body>
</html>

代码说明：
1.其中除title和script标签是自己编写或者修改的以外其余全为编辑器自动生成（创建的html文件是空白的，可以通过英文的!然后出现的浮窗来生成）
2.script引入的是ts（typescript）文件，跟js文件没有区别，但是编写代码的时候更方便，这里引入js文件也可以
3.这里嫑（不要）写要拖动的那个div标签,后面通过js来写（为了练习js）
4.其中的main.ts为后面的ts文件（js也可以）

2.CSS部分

编写完HTML部分之后给网页清除默认样式

<style>
        * {
   
            margin: 0px;
            padding: 0px;
            box-sizing: border-box;
        }
 </style>

注：style放到head标签里面

js部分（创建名为main.js或者main.ts的文件)

解释说明全在注释里面

1.首先创建div并且给予大小，边框等样式，然后放到body里面去，然后让div浮动

//创建div
var div = document.createElement("div");
//将创建好的div放到body里面去
document.body.appendChild(div);
//给创建好的div设置大小，颜色，边框
div.style.height = "100px";
div.style.width = "100px";
div.style.border = "1px solid red";
//让div浮动
div.style.position = "absolute";

2.然后先让div可以随着鼠标的移动而移动（先从简单的开始，嘿嘿，这样比较简单）

//给文档绑定鼠标移动事件，因为此时网页中就只有一个div,还是浮动的
//所以此时的body就没有大小
document.onmousemove =