具体效果需要自己试，可将div换成图片、图标。
这里用div:
代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>图片拖动</title>
<style type="text/css">
#box1 {
width: 50px;
height: 50px;
background: lightcoral;
position: absolute;
}
</style>
<script type="text/javascript">
window.onload = function () {
var box1 = document.getElementById("box1");
box1.onmousedown = function (event) {
// console.log(1);
/*再次点击时使得图标任然在那个位置，鼠标可以点击到图标上*/
var ol = event.clientX - box1.offsetLeft;
var ot = event.clientY - box1.offsetTop;
/*鼠标点击*/
document.onmousemove = function (event) {
var left = event.clientX - ol;
var top = event.clientY - ot;
box1.style.left = left+"px";/*赋值*/
box1.style.top = top+"px";
}
/*鼠标松开*/
document.onmouseup = function (event) {
document.onmousemove = null;
document.onmouseup = null;
}
}
}
</script>
</head>
<body style="height: 1000px;width: 2000px;">
<div id="box1"></div>
</body>
</html>
3636
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
