View Single Post
  #1 (permalink)  
Old February 18th, 2018, 11:54 AM
Manuell Manuell is offline
Registered User
Points: 5, Level: 1
Points: 5, Level: 1 Points: 5, Level: 1 Points: 5, Level: 1
Activity: 0%
Activity: 0% Activity: 0% Activity: 0%
 
Join Date: Feb 2018
Posts: 1
Thanks: 0
Thanked 0 Times in 0 Posts
Question Question to chapter 9: Drag&Drop

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>
Reply With Quote