让你的网页动起来:Javascript+CSS拖曳盒子指南

2024-04-19 0 75

让我为大家带来一个小案例吧!

<!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拖曳盒子内容请搜索悠久资源网以前的文章或继续浏览下面的相关文章希望大家以后多多支持悠久资源网!

您可能感兴趣的文章:

  • js点击弹出div层实现可拖曳的弹窗效果
  • 仿3721首页模块拖曳移动效果js代码[可拖曳层移动层]
  • JS实现可拖曳、可关闭的弹窗效果
  • JS实现可展开折叠层的鼠标拖曳效果
  • JavaScript实现图片拖曳效果

收藏 (0) 打赏

感谢您的支持,我会继续努力的!

打开微信/支付宝扫一扫,即可进行扫码打赏哦,分享从这里开始,精彩与您同在
点赞 (0)

悠久资源 CSS/HTML 让你的网页动起来:Javascript+CSS拖曳盒子指南 https://www.u-9.cn/biancheng/csshtml/187656.html

常见问题

相关文章

发表评论
暂无评论
官方客服团队

为您解决烦忧 - 24小时在线 专业服务