Hi there, I have some problems with Drag&Drop function. I did everything according to the book, however my code doesn't work. Any ideas, why?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset ="utf-8">
<style>
.box {
height:200px;
width:200px;
display:inline-block;
border: 2px dashed black;
}
</style>
<script>
function allowDrop(evt) {
evt.preventDefault();
}
function startDragging (evt) {
evt.datatransfer.setData("Color", evt.target.style.background);
evt.target.style.opacity=0.3;
}
function drop(evt) {
var color =evt.datatransfer.getData ("Color");
evt.currentTarget.style.background = color;
setBorderSize (evt, '2px');
}
function dragEnded(evt) {
evt.target.style.opacity=1.0;
}
</script>
</head>
<body>
<div ondragend="dragEnded (event)" ondragstart="startDragging (event)" draggable="true" class="box" style="background:red"></div>
<div ondragend="dragEnded (event)" ondragstart="startDragging (event)" draggable="true" class="box" style="background:gray"></div>
<div ondragend="dragEnded (event)" ondragstart="startDragging (event)" draggable="true" class="box" style="background:blue"></div>
<p>
<div ondrop="drop(event)" ondragover="allowDrop (event)" ondragenter="setBorderSize(event,'4px')" ondragleave="setBorderSize (event, '2px')" class="box" ></div>
<div ondrop="drop(event)" ondragover="allowDrop (event)" ondragenter="setBorderSize(event,'4px')" ondragleave="setBorderSize (event, '2px')" class="box" ></div>
<div ondrop="drop(event)" ondragover="allowDrop (event)" ondragenter="setBorderSize(event,'4px')" ondragleave="setBorderSize (event, '2px')" class="box" ></div>
</body>
</html>
Question to chapter 9: Drag&Drop
