js实现拖动div元素（js实现元素拖动）

最新推荐文章于 2024-07-30 13:59:51 发布

qaakd

最新推荐文章于 2024-07-30 13:59:51 发布

阅读量1.2w

点赞数 6

分类专栏： web前端 css js 文章标签：拖动元素 css js web前端

本文链接：https://blog.csdn.net/qaakd/article/details/102614385

版权

js 同时被 3 个专栏收录

83 篇文章 0 订阅

订阅专栏

web前端

53 篇文章 0 订阅

订阅专栏

css

3 篇文章 0 订阅

订阅专栏

注意：jquery.min.js请自行添加（没有可以百度下载）--><script src="../jquery.min.js"></script>

效果图：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>JS拖拽div</title>
<script src="jquery.min.js"></script>
<style>
.dv {
   width:100px;
   height:100px;
   background-color:green;
   border-radius:50%;
   position:absolute;
}
</style>
</head>
<body>
<div class="dv"></div>

//获取左部和顶部的偏移量
l = dv.offsetLeft;
t = dv.offsetTop;
//开关打开
isDown = true;
//设置样式
dv.style.cursor = 'move';
}
//鼠标移动
window.onmousemove = function(e) {
if (isDown == false) {
return;
}
//获取x和y
var nx = e.clientX;
var ny = e.clientY;
//计算移动后的左偏移量和顶部的偏移量
var nl = nx - (x - l);
var nt = ny - (y - t);

dv.style.left = nl + 'px';
dv.style.top = nt + 'px';
}
//鼠标抬起事件
dv.onmouseup = function() {
//开关关闭
isDown = false;
dv.style.cursor = 'default';
}
</script>

</body>
</html>

js代码可直接运行，复制即可

欢迎交流，欢迎提供更高效的代码