Ch 24 Drag and Drop

jwg · December 24th, 2011, 11:22 PM

The program in the book doesn't work properly. I typed in all and couldn't find any mistakes and then finally check the downloaded code which also doesn't work properly. In fact you get some pretty funky behavior that I haven't yet figured out the why of. It works fine if you drag the navy box and them the green box alternately but if you try to drag and drop and then drag and drop either of the boxes twice (or more in a row) things go wrong in a quite interesting way. The box remains where it is and a semi-transparent box follow along with the mouse cursor and only when you let go does the solid box jump to the new position. Then sometimes the box is stuck to the mouse cursor as if the mouseup was missed and it is necessary to click again to get the box and the mouse separated. I'd love to hear from J. McPeak how to fix this, and how to explain what accounts for the semitransparent box.

jmcpeak · December 25th, 2011, 01:32 AM

Howdy, jwg.

What operating system and browser are you using?

I've tested in IE9, Chrome 16, and Firefox 7. The only browser that gives me unexpected results is Firefox 7. From the looks of it, the browser's built-in drag-n-drop functionality kicks in and causes some issues with the script. I'll look into it in a few days.

jwg · January 5th, 2012, 12:11 AM

Hi JMCPeak,

I'm wondering if you have figured out any fix or alternative way of programming drag and drop that works.

jwg · January 14th, 2012, 11:33 PM

Hi again,

It's been quite a while and you said you'd have an answer in a few days. I'm wondering if you are stumped or if you are going to say anything more about the fact that the drag and drop program in chapter 24 doesn't work in the current version of Firefox? Is this a bug in Firefox that should be reported? Is there a way to write a drag and drop script in JavaScript that would work in the current version?

I tried to contact you through your homepage but the contact page did not work. I kept getting a message that there was an error and to try again.

I did respond to you request for the version number of Firefox that I'm using. Here it is again: 9.01 is what it says under Help -> about Firefox.

JWG

jmcpeak · January 16th, 2012, 01:25 PM

My apologies, jwg. Time slipped away from me.

The fix is rather easy; just modify the code handling the mousedown event in the mouseHandler() function to look like this:

Code:

case "mousedown":
    if (eSrc.className.indexOf("draggable") > -1) {
        dragObj.dragging = true;
        dragObj.setDragObj(eSrc, x, y);
        eventUtility.preventDefault(event);
    }
    break;

The only change is the call to the eventUtility.preventDefault() method. That should prevent Firefox's built-in drag-n-drop feature from kicking in.

jwg · February 4th, 2012, 12:37 AM

Thanks for the fix.

Coda · April 29th, 2015, 11:28 AM

Hello,

I use an iPad to complete the lessons - so far, so good. I have now come across a problem: in lesson 24 (and preceding lessons) the interactivity possible with the use of the mouse obviously does not work with my touchscreen device. I have researched touchscreen events and their implementation from W3C, but it is not a simple case of substitution.

How do I gain the same level of interactivity for touchscreen devices as is possible with touchpad and mouse enabled devices? This issue also affects proceeding lessons, so it is in my interest to find a solution to this problem.

Thanks.