Wrox Programmer Forums
|
BOOK: Professional JavaScript for Web Developers ISBN: 978-0-7645-7908-0
This is the forum to discuss the Wrox book Professional JavaScript for Web Developers by Nicholas C. Zakas; ISBN: 9780764579080
Welcome to the p2p.wrox.com Forums.

You are currently viewing the BOOK: Professional JavaScript for Web Developers ISBN: 978-0-7645-7908-0 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
 
Old May 18th, 2006, 07:38 AM
Registered User
 
Join Date: May 2006
Posts: 5
Thanks: 0
Thanked 0 Times in 0 Posts
Default Drag and Drop Issue - XHTML?

This took me quite a while to isolate so I thought I would pass it on. I was also curious about why it occurs.

If the following 2 lines are in your file:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/2000/REC-xhtml1-20000126/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

The ZDragExample does not work correctly (at least in Version 2.0.3 (417.9.3)).

These are boilerplate lines I pick up from Dreamweaver that I beleive indicates that this is XHTML compliant code.

The sympton is that the draggable item does not follow the mouse but jumps to the drop target and is difficult to get to drop...



 
Old May 18th, 2006, 11:18 AM
Registered User
 
Join Date: May 2006
Posts: 5
Thanks: 0
Thanked 0 Times in 0 Posts
Default

Another question about zlib...

The last line breaks the drag and drop (adding the second event listener.) Do I need to use the eventutil class?

Thanks in advance...


 
Old May 18th, 2006, 11:19 AM
Registered User
 
Join Date: May 2006
Posts: 5
Thanks: 0
Thanked 0 Times in 0 Posts
Default

Oops. Here is the code...

<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1"/>
<META name="description" content="Math facts game based on Betsy Ross Solataire">
<META name="keywords" content="math, facts, solataire, elementary, mental math">
<title><?php echo $page_title; ?></title>
<LINK REL=StyleSheet HREF="mathFacts.css" TYPE="text/css">
<script type="text/javascript" src="zdragdroplib.js"></script>
<script type="text/javascript">
       function doLoad() {
                var oDraggable = new zDraggable(document.getElementById("stockpile"), zDraggable.DRAG_X | zDraggable.DRAG_Y);
                var oDropTarget01 = new zDropTarget(document.getElementById("pile01"));
                var oDropTarget02 = new zDropTarget(document.getElementById("pile02"));
                var oDropTarget03 = new zDropTarget(document.getElementById("pile03"));
                var oDropTarget04 = new zDropTarget(document.getElementById("pile04"));
                var oDropTarget05 = new zDropTarget(document.getElementById("pile05"));
                var oDropTarget06 = new zDropTarget(document.getElementById("pile06"));
                var oDropTarget07 = new zDropTarget(document.getElementById("pile07"));
                var oDropTarget08 = new zDropTarget(document.getElementById("pile08"));
                var oDropTarget09 = new zDropTarget(document.getElementById("pile09"));
                var oDropTarget10 = new zDropTarget(document.getElementById("pile10"));

                // alert ("Loading") ;
                oDraggable.addDropTarget(oDropTarget01);
                oDropTarget01.addEventListener("drop", function (oEvent) {
                    oEvent.relatedTarget.moveTo(oDropTarget01.getLeft( ), oDropTarget01.getTop());
                oDraggable.addDropTarget(oDropTarget02);
                oDropTarget02.addEventListener("drop", function (oEvent) {
                    oEvent.relatedTarget.moveTo(oDropTarget02.getLeft( ), oDropTarget02.getTop());
                                    });
            }

</script>

</head>

 
Old May 18th, 2006, 05:09 PM
Registered User
 
Join Date: May 2006
Posts: 5
Thanks: 0
Thanked 0 Times in 0 Posts
Default

I found the cause of the second event listener issue. It was a simple syntax error. Reading ahead to Chapter 14, I found out how to turn on JS error reporting in Safari (by the way, it seems to have improved from what the book describes). Because there was no error generates, I was mislead into thinking that adding the second event handler was the problem. Anyway, it looks good and it looks like zdragdroplib supports multiple drop targets as well as draggable elements...

The correct syntax was:

                // Pile 1
                oDraggableS.addDropTarget(oDropTarget01); // Make pile 1 a target for the stockpile
                oDraggableW.addDropTarget(oDropTarget01); // Make pile 1 a targte for the wastepile
                oDropTarget01.addEventListener("drop", function (oEvent) {
                    oEvent.relatedTarget.moveTo(oDropTarget01.getLeft( ), oDropTarget01.getTop()); });
                // Pile 2
                oDraggableS.addDropTarget(oDropTarget02);
                oDraggableW.addDropTarget(oDropTarget02);
                oDropTarget02.addEventListener("drop", function (oEvent) {
                    oEvent.relatedTarget.moveTo(oDropTarget02.getLeft( ), oDropTarget02.getTop()); });






Similar Threads
Thread Thread Starter Forum Replies Last Post
Drag and Drop batott ASP.NET 2.0 Professional 3 April 26th, 2008 07:59 PM
XHTML with Doctype disables Drag and Drop bradrice BOOK: Professional JavaScript for Web Developers ISBN: 978-0-7645-7908-0 1 December 16th, 2006 08:55 AM
Drag and drop vpinhao Beginning VB 6 0 September 11th, 2006 01:33 PM
Drag/Drop bmains Javascript 1 September 22nd, 2004 07:29 PM
Drag and drop Clive Astley Access 2 August 15th, 2003 12:11 PM





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