Drag and Drop Issue

jheffernan · May 18th, 2006, 07:38 AM

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...

jheffernan · May 18th, 2006, 11:18 AM

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...

jheffernan · May 18th, 2006, 11:19 AM

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>

jheffernan · May 18th, 2006, 05:09 PM

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()); });