加入 Gitee
与超过 1200万 开发者一起发现、参与优秀开源项目,私有仓库也完全免费 :)
免费加入
文件
该仓库未声明开源许可证文件(LICENSE),使用请关注具体项目描述及其代码上游依赖。
克隆/下载
practise12.html 1.39 KB
一键复制 编辑 原始数据 按行查看 历史
欸嘿 提交于 2021-08-14 16:46 . commit
<!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>
Loading...
马建仓 AI 助手
尝试更多
代码解读
代码找茬
代码优化