Wrox Programmer Forums

Need to download code?

View our list of code downloads.

Go Back   Wrox Programmer Forums > Web Programming > HTML > BOOK: HTML5, JavaScript and jQuery 24-Hour Trainer
Password Reminder
Register
Register | FAQ | Members List | Calendar | 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 tens of thousands of software programmers and website developers including Wrox book authors and readers. As a guest, you can read any forum posting. By joining today you can post your own programming questions, respond to other developersí questions, and eliminate the ads that are displayed to guests. Registration is fast, simple and absolutely free .
DRM-free e-books 300x50
Reply
 
Thread Tools Display Modes
  #1 (permalink)  
Old February 18th, 2018, 10: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>
Reply With Quote
Reply


Thread Tools
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is Off
HTML code is Off
Trackbacks are Off
Pingbacks are On
Refbacks are Off

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 08:03 AM



All times are GMT -4. The time now is 09:35 AM.


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