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 April 24th, 2006, 04:56 AM
Registered User
 
Join Date: Apr 2006
Posts: 4
Thanks: 0
Thanked 0 Times in 0 Posts
Default Drag and Drop Javascript

I am currently working through the Professional JavaScript book and am enjoying the Drag and Drop chapter. However I have found that some DIVs don't release the mouse after lifting the button up. Instead the DIV just follows mouse permenantly and I have to refresh the entire page to get my mouse back. Can anyone offer any suggestion how I can fix this ?

 
Old April 24th, 2006, 09:20 AM
Friend of Wrox
 
Join Date: Oct 2004
Posts: 553
Thanks: 0
Thanked 1 Time in 1 Post
Send a message via MSN to vinod_yadav1919 Send a message via Yahoo to vinod_yadav1919
Default

Hi Mcornes!
try to check event handler on mouse up/release,if possible post the code .



Cheers :)

vinod
 
Old April 24th, 2006, 11:57 AM
Registered User
 
Join Date: Apr 2006
Posts: 4
Thanks: 0
Thanked 0 Times in 0 Posts
Default

I have just used and expanded on the chapter 13 example. The same problem can be observed in the example code. It's as if the drag and mouse up event are getting confused and then the div follows the mouse even if the mouse button isn't down. This is present in Safari, Firefox and Internet Explorer

 
Old April 24th, 2006, 12:11 PM
nzakas's Avatar
Wrox Author
 
Join Date: Dec 2004
Posts: 217
Thanks: 0
Thanked 5 Times in 5 Posts
Default

Which example are you using (what's the filename?)? Have you made any changes to the example? If so, it would be helpful if you could describe the changes you've made.

Nicholas C. Zakas
Author, Professional JavaScript for Web Developers (ISBN 0764579088)
http://www.nczonline.net/
 
Old April 24th, 2006, 12:17 PM
Registered User
 
Join Date: Apr 2006
Posts: 4
Thanks: 0
Thanked 0 Times in 0 Posts
Default

ZDragExample.htm

I have made changes but the problem is present in the standard file. Whereby the mouse doesn't release a div and it just continues to follow it around.

 
Old April 24th, 2006, 12:30 PM
nzakas's Avatar
Wrox Author
 
Join Date: Dec 2004
Posts: 217
Thanks: 0
Thanked 5 Times in 5 Posts
Default

What exactly are you doing in the example to make this happen? I've now tried it a couple times in both IE and Firefox and can't seem to reproduce the issue you describe.

Nicholas C. Zakas
Author, Professional JavaScript for Web Developers (ISBN 0764579088)
http://www.nczonline.net/
 
Old April 24th, 2006, 01:05 PM
Registered User
 
Join Date: Apr 2006
Posts: 4
Thanks: 0
Thanked 0 Times in 0 Posts
Default

Dragging a div around the screen, you will find the arrow becomes a verticle bar, and ocassionally slips off the div and becomes a circle with a strike through it. I find then that div wouldn't let go of the mouse, as it were.

To make sure it happens so you can see it - drag the div around very fast and that usually make the problem occure.

 
Old April 29th, 2006, 07:02 PM
Authorized User
 
Join Date: Mar 2006
Posts: 13
Thanks: 0
Thanked 0 Times in 0 Posts
Default

I also see this issue, but only in Firefox.

I noticed that the issue is fixed by adding the following CSS:
Code:
body
{
    height:100%;
    width:100%;
}
But a better solution would be to update the zdragdroplib.js. Change the following lines:
Code:
// In the attachEventHandlers method
document.body.addEventListener("mousemove",this.tempMouseMove,false);

// In the detachEventHandlers method
document.body.removeEventListener("mousemove",this.tempMouseMove,false);
with:
Code:
// In the attachEventHandlers method
document.addEventListener("mousemove",this.tempMouseMove,false);

// In the detachEventHandlers method
document.removeEventListener("mousemove",this.tempMouseMove,false);
Note that the body height in standard compliance mode is equal to the content, so attaching the event to the document.body would fail on a page with no content and one draggable div (elements with position:absolute don't add height to the body). Adding height 100% to the body would do the trick, but its simply better to attach the event to the document instead.

/José Jeria
 
Old April 30th, 2006, 10:02 AM
nzakas's Avatar
Wrox Author
 
Join Date: Dec 2004
Posts: 217
Thanks: 0
Thanked 5 Times in 5 Posts
Default

Jose,

I've updated the code per your suggestion. It can be downloaded at http://www.nczonline.net/downloads/.

Nicholas C. Zakas
Author, Professional JavaScript for Web Developers (ISBN 0764579088)
http://www.nczonline.net/
 
Old July 28th, 2006, 04:05 AM
Registered User
 
Join Date: Jul 2006
Posts: 1
Thanks: 0
Thanked 0 Times in 0 Posts
Default

Nicholas ,

Your code is not compatible with FireFox browser. :(






Similar Threads
Thread Thread Starter Forum Replies Last Post
Drag and Drop / Appendix C dvance BOOK: Beginning ASP.NET 2.0 AJAX ISBN: 978-0-470-11283-0 3 August 4th, 2008 11:51 AM
Drag and Drop batott ASP.NET 2.0 Professional 3 April 26th, 2008 07:59 PM
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.