HTML5实现div拖拽
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div style="border :1px solid red; width :500px;height :300px ; overflow:hidden; margin:20px">
<div id="blackSquare" style="position: relative; width:50px; height:50px; background-color: black;cursor: pointer;color:#fff">wjw</div>
</div>
</body>
<script>
window.onload = () => {
//获取拖拽实验对象
let el=document.getElementById("blackSquare");
//在该对象上绑定鼠标点击事件
el.onmousedown = (e) => {
//鼠标按下，计算鼠标触点距离元素左侧的距离
let disX = e.clientX - el.offsetLeft;
let disY = e.clientY - el.offsetTop;
document.onmousemove = function (e) {
//计算需要移动的距离
let t = e.clientX - disX;
let P = e.clientY - disY;
//移动当前元素
if (t >= 0 && t <= window.innerWidth - el.offsetWidth) {
el.style.left = t + 'px';
}
//移动当前元素
if (P >= 0 && P <= window.innerHeight - el.offsetHeight ) {
el.style.top = P + 'px';
}
};
//鼠标松开时，注销鼠标事件，停止元素拖拽。
document.onmouseup = function (e) {
document.onmousemove = null;
document.onmouseup = null;
};
}
}
</script>
</html>
【版权声明】本博文著作权归作者所有，任何形式的转载都请联系作者获取授权并注明出处！
【重要说明】博文仅作为本人的学习记录，论点和观点仅代表个人而不代表技术的真理，目的是自我学习和有幸成为可以向他人分享的经验，因此有错误会虚心接受改正，但不代表此刻博文无误！
【博客园地址】叫我+V ： http://www.cnblogs.com/wjw1014
【CSDN地址】叫我+V ： https://wjw1014.blog.csdn.net/
【Gitee地址】叫我+V ：https://gitee.com/wjw1014
【重要说明】博文仅作为本人的学习记录，论点和观点仅代表个人而不代表技术的真理，目的是自我学习和有幸成为可以向他人分享的经验，因此有错误会虚心接受改正，但不代表此刻博文无误！
【博客园地址】叫我+V ： http://www.cnblogs.com/wjw1014
【CSDN地址】叫我+V ： https://wjw1014.blog.csdn.net/
【Gitee地址】叫我+V ：https://gitee.com/wjw1014
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步
· AI与.NET技术实操系列：基于图像分类模型对图像进行分类
· go语言实现终端里的倒计时
· 如何编写易于单元测试的代码
· 10年+ .NET Coder 心语，封装的思维：从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热？
· 25岁的心里话
· 闲置电脑爆改个人服务器（超详细） #公网映射 #Vmware虚拟网络编辑器
· 基于 Docker 搭建 FRP 内网穿透开源项目（很简单哒）
· 零经验选手，Compose 一天开发一款小游戏！
· 一起来玩mcp_server_sqlite，让AI帮你做增删改查！！