代码拉取完成,页面将自动刷新
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id="box1"></div>
<div id="box2"></div>
</body>
</html>
<script type="text/javascript">
var box1 = document.getElementById("box1")
// 鼠标在被拖拽元素按下时开始拖拽onmousedown
// 鼠标移动时被拖拽元素跟随鼠标移动onmousemove
// 鼠标松开时,被拖拽元素固定在当前位置onmouseup
box1.onmousedown = function(e){
// div 的偏移量
var ol = e.clientX - box1.offsetLeft;
var ot = e.clientY - box1.offsetTop;
document.onmousemove = function(e){
// var left = e.pageX;
// var top = e.pageY;
// box1.style.left = (left-parseInt(getComputedStyle(box1,null).width)/2)+"px";
// box1.style.top = (top-parseInt(getComputedStyle(box1,null).height)/2)+"px";
var left = e.clientX - ol;
var top = e.clientY - ot;
box1.style.left = left + "px";
box1.style.top = top + "px"
}
}
document.onmouseup = function(){
// 取消document的onmousemove事件
document.onmousemove = null;
// 取消document的onmouseup事件,有bug
document.onmouseup = null;
}
</script>
<style type="text/css">
#box1{
width: 3.125rem;
height: 3.125rem;
border-radius: 1.5625rem;
background-color:red ;
position: absolute;
}
#box2{
width: 3.125rem;
height: 3.125rem;
background-color:yellow ;
position: absolute;
top: 12.5rem;
left: 6.25rem;
}
</style>
此处可能存在不合适展示的内容,页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容,可点击提交进行申诉,我们将尽快为您处理。