我想了解html5的拖放操作,我可以让它拖动,并让拖动的元素接受它。然而,我不能得到ondrag或ondragenter,或者至少是那些事件调用的函数我不确定我做错了什么。拖放HTML5无法正常工作?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Week 3 Drag and Drop</title>
<link rel="stylesheet" type="text/css" href="Week3DragAndDropCSS.css">
<script src="Week3DragAndDropJS.js"></script>
</head>
<body>
<header>
<h1>Week 3 Drag and Drop</h1>
</header>
<div style="height:200px;width:200px;background: red"
id="obj1"draggable="true"></div>
<div style="height:200px;width:200px;background:
green"id="obj2"draggable="true"></div>
<div style="height:200px;width:200px;background: orange"
id="obj3"draggable="true"></div>
<div style="height:200px;width:200px;background-image: url
('trash.png');background-repeat: no-repeat;" id="trashCan"
ondragover="allowDrop(event)" ondragenter="setBorder(event,'5px')"
ondragleave="setBorder(event,'2px')" ondrop="drop(event)"></div>
<footer>
</footer>
</body>
</html>
那么这里就是我的JS:
function drag(evt){
evt.dataTransfer.setData("color", ev.target.background);
}
function allowDrop(evt){
evt.preventDefault();
}
function drop(evt){
evt.preventDefault();
var color = evt.dataTransfer.getData("color");
evt.currentTarget.style.background = color;
}
function setBorder(evt,size){
evt.currentTarget.border = (size +"solid black");
}
对不起大家透水js代码是错误的文件。我在问题中更新了它。 –