前端div拖拽功能
html代码
<div id='dragDiv'></div>
js代码
function dragFunc(id) {
var Drag = document.getElementById(id);
Drag.onmousedown = function(event) {
var ev = event || window.event;
event.stopPropagation();
var disX = ev.clientX - Drag.offsetLeft;
var disY = ev.clientY - Drag.offsetTop;
document.onmousemove = function(event) {
var ev = event || window.event;
Drag.style.left = ev.clientX - disX + "px";
Drag.style.top = ev.clientY - disY + "px";
Drag.style.cursor = "move";
};
};
Drag.onmouseup = function() {
document.onmousemove = null;
this.style.cursor = "default";
};
};
dragFunc("dragDiv");
全部代码（复制代码，建立drag.html文件，直接浏览器测试）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>前端拖拽</title>
<style>
body {
margin: 10px;
}
#dragDiv {
position: absolute;
width: 500px;
height: 400px;
border: 2px solid #92cccc;
border-radius: 10px;
background: rgba(0, 0, 0, 0.5);
z-index: 1000px;
}
</style>
</head>
<body>
<div id='dragDiv'></div>
<script>
function dragFunc(id) {
var Drag = document.getElementById(id);
Drag.onmousedown = function(event) {
var ev = event || window.event;
event.stopPropagation();
var disX = ev.clientX - Drag.offsetLeft;
var disY = ev.clientY - Drag.offsetTop;
document.onmousemove = function(event) {
var ev = event || window.event;
Drag.style.left = ev.clientX - disX + "px";
Drag.style.top = ev.clientY - disY + "px";
Drag.style.cursor = "move";
};
};
Drag.onmouseup = function() {
document.onmousemove = null;
this.style.cursor = "default";
};
};
dragFunc("dragDiv");
</script>
</body>
</html>
476
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
