p2p.wrox.com Forums

p2p.wrox.com Forums (http://p2p.wrox.com/index.php)
-   BOOK: HTML5, JavaScript and jQuery 24-Hour Trainer (http://p2p.wrox.com/forumdisplay.php?f=780)
-   -   Question to chapter 9: Drag&Drop (http://p2p.wrox.com/showthread.php?t=99788)

Manuell February 18th, 2018 11:54 AM

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>


All times are GMT -4. The time now is 10:14 AM.

Powered by vBulletin®
Copyright ©2000 - 2019, Jelsoft Enterprises Ltd.
© 2013 John Wiley & Sons, Inc.