画四个小球和三个框,鼠标拖拽四个小球进入第一个框内,弹出成功提示框,写一段网页代码
时间: 2023-12-03 09:03:20 浏览: 26
好的,以下是基于HTML、CSS和JavaScript的代码实现:
```html
<!DOCTYPE html>
<html>
<head>
<title>小球拖拽</title>
<style>
#ballContainer {
display: flex;
justify-content: space-between;
align-items: center;
height: 300px;
}
.ball {
width: 50px;
height: 50px;
background-color: red;
border-radius: 50%;
margin: 10px;
cursor: pointer;
}
.box {
width: 100px;
height: 100px;
border: 2px solid black;
margin: 10px;
display: flex;
justify-content: center;
align-items: center;
}
.success {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: green;
color: white;
padding: 10px;
border-radius: 5px;
display: none;
}
</style>
</head>
<body>
<div id="ballContainer">
<div class="ball"></div>
<div class="ball"></div>
<div class="ball"></div>
<div class="ball"></div>
</div>
<div id="boxContainer">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
<div id="successMsg" class="success">拖拽成功!</div>
<script>
const balls = document.querySelectorAll('.ball');
const boxes = document.querySelectorAll('.box');
const successMsg = document.querySelector('#successMsg');
let draggedBall = null;
for (let ball of balls) {
ball.addEventListener('dragstart', () => {
draggedBall = ball;
});
ball.addEventListener('dragend', () => {
draggedBall = null;
});
}
for (let box of boxes) {
box.addEventListener('dragover', (e) => {
e.preventDefault();
});
box.addEventListener('drop', (e) => {
e.preventDefault();
if (e.target.classList.contains('box') && e.target.children.length === 0) {
e.target.appendChild(draggedBall);
successMsg.style.display = 'block';
setTimeout(() => {
successMsg.style.display = 'none';
}, 2000);
}
});
}
</script>
</body>
</html>
```
在这个实现中,我们首先使用了flex布局,将小球和框排列在一行,方便用户进行拖拽操作。小球和框都是使用div元素实现的,小球的样式通过CSS设置,框的样式同样也是通过CSS设置。对于提示框,我们使用了一个绝对定位的div元素,并将其初始状态设为不可见。
在JavaScript代码中,我们首先使用querySelector和querySelectorAll方法获取到需要操作的元素,然后为每个小球添加了dragstart和dragend事件,分别在拖拽开始和结束时记录和取消记录拖拽的小球。对于框,我们为其添加了dragover和drop事件,以防止默认行为和获取拖拽的元素。在拖拽结束时,我们首先判断放置的目标框是否为空,如果为空则将小球添加到框中,同时弹出提示框并在2秒后隐藏。