让我为大家带来一个小案例吧！
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
* {
margin: 0;
padding: 0;
}
.box1 {
width: 100px;
height: 100px;
background-color: black;
margin-bottom: 10px;
position: relative;
left: 0;
top: 0;
}
.box2 {
width: 100px;
height: 100px;
background-color: pink;
margin-bottom: 10px;
margin-left: 200px;
}
.box3 {
width: 100px;
height: 100px;
background-color: orange;
margin-top: 120px;
margin-left: 200px;
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
</body>
<script>
//获取要移动的盒子
var div = document.querySelector(".box1")
//获取其他2个盒子
var div1=document.querySelector(".box2")
var div2=document.querySelector(".box3")
div.onmousedown = function(e){
//获取盒子距离页面多少
var divX =div.offsetLeft
var divY =div.offsetTop
//获取盒子点击的xy坐标
var downX =e.clientX
var downY =e.clientY
document.onmousemove=function(e){
console.log(e);
// if(div.offsetLeft<1){
// alert("超出")
// }
//获取盒子点击的地方距离document点击的坐标的差
var moveX =e.clientX - downX
var moveY =e.clientY - downY
//获取移动鼠标想放哪放哪
// div.style.left =divX+moveX+"px"
// div.style.top =divY+moveY+"px"
//这个的中心点在中间
div.style.left =e.clientX - div.offsetWidth/2+"px"
div.style.top =e.clientY - div.offsetHeight/2+"px"
//拿他们的宽高去判断坐标
if(e.clientX<div1.offsetWidth+div.offsetWidth/2+200&&e.clientX>div1.offsetWidth+div.offsetWidth/2&&e.clientY>div1.offsetTop/2&&e.clientY<div1.offsetTop*2+40){
console.log(div1.offsetTop);
div1.style.backgroundColor="green"
}else{
div1.style.backgroundColor="pink"
}
//拿他们的距离去判断
if(e.clientX<div2.offsetWidth+div.offsetWidth/2+200&&e.clientX>div1.offsetWidth+div.offsetWidth/2&&e.clientY>div2.offsetTop-div.offsetHeight/2&&e.clientY<div2.offsetTop+div.offsetHeight+div.offsetHeight/2){
div2.style.backgroundColor="blue"
}else {
div2.style.backgroundColor="orange"
}
}
}
//如果按起就不动
div.onmouseup = function(){
document.onmousemove = null
}
</script>
</html>效果图：
到此这篇关于让你的网页动起来:Javascript+CSS拖曳盒子指南的文章就介绍到这了,更多相关 Javascript+CSS拖曳盒子内容请搜索本站以前的文章或继续浏览下面的相关文章希望大家以后多多支持本站！
本站资源均来自互联网，仅供研究学习，禁止违法使用和商用，产生法律纠纷本站概不负责！如果侵犯了您的权益请与我们联系！
转载请注明出处： 免费源码网-免费的源码资源网站 » 让你的网页动起来:Javascript+CSS拖曳盒子指南
发表评论 取消回复