Wrox Programmer Forums
| Search | Today's Posts | Mark Forums Read
BOOK: HTML5, JavaScript and jQuery 24-Hour Trainer
This is the forum to discuss the Wrox book HTML5, JavaScript and jQuery 24-Hour Trainer by Dane Cameron; ISBN: 978-1-119-00116-4
Welcome to the p2p.wrox.com Forums.

You are currently viewing the BOOK: HTML5, JavaScript and jQuery 24-Hour Trainer section of the Wrox Programmer to Programmer discussions. This is a community of software programmers and website developers including Wrox book authors and readers. New member registration was closed in 2019. New posts were shut off and the site was archived into this static format as of October 1, 2020. If you require technical support for a Wrox book please contact http://hub.wiley.com
  #1 (permalink)  
Old February 18th, 2018, 11:54 AM
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>


Similar Threads
Thread Thread Starter Forum Replies Last Post
Chapter 13 Drag & Drop Boboneil BOOK: Professional JavaScript for Web Developers ISBN: 978-0-7645-7908-0 0 April 13th, 2010 01:01 PM
Drag and Drop batott ASP.NET 2.0 Professional 3 April 26th, 2008 07:59 PM
Drag & drop Errors jjustin BOOK: Professional JavaScript for Web Developers ISBN: 978-0-7645-7908-0 0 August 25th, 2006 09:21 AM
Creatin a drop & Drag Application in Vb.NET enggalok General .NET 0 May 19th, 2004 11:50 PM
Drop&Drag file activex ResDev Classic ASP Components 0 January 30th, 2004 09:03 AM





Powered by vBulletin®
Copyright ©2000 - 2020, Jelsoft Enterprises Ltd.
Copyright (c) 2020 John Wiley & Sons, Inc.