dragenter：当拖拽对象进入投放区时触发
dragover：拖拽对象在投放区内移动时触发
dragleave：拖拽对象没有投放到投放区，离开投放区时触发
drop：拖拽对象投放在投放区时触发
dragenter、dragover可能会受到默认事件的影响，所以我们在这两个事件中使用e.preventDefault();来阻止事件默认事件
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>点餐</title>
<style>
.area{width: 270px;height:310px;float:left;margin: 10px;}
.customer{width:270px;height:360px; border:1px solid red;}
.img{width:250px;height: 150px; margin: 10px;}
</style>
<script>
window.onload=function(){
var A=document.getElementById("A");
var B=document.getElementById("B");
var C=document.getElementById("C");
var foodarea=document.getElementById("foodarea");
var foods=document.getElementsByName("food");
for(var i=0;i<foods.length;i++){
foods[i].ondragstart=function(e){
e.dataTransfer.setData("Text",e.target.id);
}
foods[i].ondragend=function(e){
e.dataTransfer.clearData("Text");
}
A.ondragenter=function(e){
e.preventDefault();
}
A.ondragover=function(e){
e.preventDefault();
}
A.ondragleave=function(e){
e.preventDefault();
}
A.ondrop=function(e){
e.preventDefault();
var i=e.dataTransfer.getData("Text");
A.appendChild(document.getElementById(i));
}
B.ondragenter=function(e){
e.preventDefault();
}
B.ondragover=function(e){
e.preventDefault();
}
B.ondragleave=function(e){
e.preventDefault();
}
B.ondrop=function(e){
e.preventDefault();
var i=e.dataTransfer.getData("Text");
B.appendChild(document.getElementById(i));
}
C.ondragenter=function(e){
e.preventDefault();
}
C.ondragover=function(e){
e.preventDefault();
}
C.ondragleave=function(e){
e.preventDefault();
}
C.ondrop=function(e){
e.preventDefault();
var i=e.dataTransfer.getData("Text");
C.appendChild(document.getElementById(i));
}
}
var foodarea = document.getElementsByName("foodarea");
for(var i=0;i<foodarea.length;i++){
foodarea[i].ondragenter=function(e){
e.preventDefault();
}
foodarea[i].ondragover=function(e){
e.preventDefault();
}
foodarea[i].ondragleave=function(e){
e.preventDefault();
}
foodarea[i].ondrop=function(e){
e.preventDefault();
var i=e.dataTransfer.getData("Text");
this.appendChild(document.getElementById(i));
}
}
}
</script>
</head>
<body>
<table align="center" height="900">
<tr>
<td><div class="area">
<div align="center">顾客A</div>
<div class="customer" id="A">放置区</div>
</div>
</td>
<td><div class="area">
<div align="center">顾客B</div>
<div class="customer" id="B">放置区</div>
</div>
</td>
<td>
<div class="area">
<div align="center">顾客C</div>
<div class="customer" id="C">放置区</div>
</div>
</td>
</tr>
<tr>
<td align="center" colspan="3">请选择一下菜品</td>
</tr>
<tbody>
<tr>
<td width="250" height="150" name="foodarea"><img src="img/dl1d.jpg" draggable="true" class="img" name="food" id="1"/></td>
<td width="250" height="150" name="foodarea"><img src="img/dl2d.jpg" draggable="true" class="img" name="food" id="2"/></td>
<td width="250" height="150" name="foodarea"><img src="img/dl3d.jpg" draggable="true" class="img" name="food" id="3"/></td>
</tr>
<tr>
<td width="250" height="150" name="foodarea"><img src="img/js1.jpg" draggable="true" class="img" name="food" id="4"/></td>
<td width="250" height="150" name="foodarea"><img src="img/js2.jpg" draggable="true" class="img" name="food" id="5"/></td>
<td width="250" height="150" name="foodarea"><img src="img/js3.jpg" draggable="true" class="img" name="food" id="6"/></td>
</tr>
</tbody>
</table>
</body>
</html>
网友评论