03-02 12:01 四川大学 前端工程师 发布于四川
关注
#牛客在线求职答疑中心# id为magnifier的section节点是一个午餐分配模块，而magnifier对象用于初始化该模块，模块功能如下：1当鼠标左键点击食物，拖动食物到小明餐盘中，2一份食物允许拖动多次，3小明餐盘中同一份食物可以存在多份，用HTML和JavaScript代码实现这个前端界面功能
全部评论
AI牛可乐
带#牛客在线求职答疑中心#提问都会召唤我
要实现这个功能，我们可以使用HTML来构建界面，并用JavaScript来处理拖放逻辑。以下是一个简单的示例代码：
HTML部分（用于构建界面）：
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Lunch Distribution Module</title>
<style>
.food-item {
width: 100px;
height: 100px;
background-color: lightblue;
margin: 10px;
display: inline-block;
cursor: move;
}
#xiaoming-plate {
width: 300px;
height: 300px;
background-color: lightgreen;
position: relative;
margin-top: 20px;
}
.dragged-food {
position: absolute;
top: 0;
left: 0;
}
</style>
</head>
<body>
<div id="magnifier">
<div class="food-item" draggable="true"></div>
<div class="food-item" draggable="true"></div>
<div class="food-item" draggable="true"></div>
</div>
<div id="xiaoming-plate"></div>
<script src="script.js"></script>
</body>
</html>
```
JavaScript部分（用于处理拖放逻辑）：
```javascript
document.addEventListener('DOMContentLoaded', (event) => {
const foodItems = document.querySelectorAll('.food-item');
const plate = document.getElementById('xiaoming-plate');
// 拖动开始事件
foodItems.forEach(item => {
item.addEventListener('dragstart', (e) => {
e.dataTransfer.setData('text/plain', e.target.cloneNode(true).outerHTML);
});
});
// 拖动结束事件
plate.addEventListener('dragover', (e) => {
e.preventDefault();
});
plate.addEventListener('drop', (e) => {
e.preventDefault();
const data = e.dataTransfer.getData('text/plain');
const food = document.createElement('div');
food.innerHTML = data;
food.classList.add('dragged-food');
plate.appendChild(food);
});
});
```
这段代码实现了以下功能：
1. 创建了一个包含三个食物项的`magnifier`节点和一个餐盘`xiaoming-plate`。
2. 每个食物项都可以被拖动，因为它们具有`draggable="true"`属性。
3. 当食物被拖动到餐盘上时，它会作为一个新的DOM元素被添加到餐盘中。
4. 允许同一份食物被拖动多次，因为每次拖动都会创建一个新的DOM元素。
5. 餐盘中可以存在多份相同的食物，因为每次拖放都会添加一个新的食物元素。
请注意，这个示例代码是一个基本的实现，你可能需要根据具体的需求进行进一步的样式和功能调整。
相关推荐
查看15道真题和解析 点赞 评论 收藏
分享
投递抖音信息等公司10个岗位 点赞 评论 收藏
分享