Daniel Haller
2007-Jan-15 18:55 UTC
X/Y-position of an element after dragging with scriptacolous
Hi there, does anybody know if there''s a way to figure out which coordinates an element has AFTER it was dragged across the page by the user? I user the scriptacolous Lib like this...: new Draggable(''notice'',{handle:''notice_ctrl'',zindex:1000}); ...and I want to store the X/Y-Position of the Element ''notice'' to a Database. How do I get this values after Dragging? offsetTop/offsetLeft does not work, this returns the X/Y-Position of the Element BEFORE it was dragged. Thank you for your patience, Daniel --~--~---------~--~----~------------~-------~--~----~ You received this message because you are subscribed to the Google Groups "Ruby on Rails: Spinoffs" group. To post to this group, send email to rubyonrails-spinoffs-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org To unsubscribe from this group, send email to rubyonrails-spinoffs-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org For more options, visit this group at groups.google.com/group/rubyonrails-spinoffs?hl=en -~----------~----~----~----~------~----~------~--~---
Dave Crane
2007-Jan-16 09:14 UTC
Re: X/Y-position of an element after dragging with scriptacolous
On Monday 15 January 2007 18:55, Daniel Haller wrote:> Hi there, > > does anybody know if there''s a way to figure out which coordinates an > element has AFTER it was dragged across the page by the user? > > I user the scriptacolous Lib like this...: > new Draggable(''notice'',{handle:''notice_ctrl'',zindex:1000}); > ...and I want to store the X/Y-Position of the Element ''notice'' to a > Database. How do I get this values after Dragging? offsetTop/offsetLeft > does not work, this returns the X/Y-Position of the Element BEFORE it > was dragged. > > Thank you for your patience, > Daniel >Hi Daniel, offsetTop/offfsetLeft work for me in a very simple mocked-up example, coded in below (just add your own Prototype & Scriptaculous libs!) <html> <head> <script type=''text/javascript'' src=''prototype/prototype.js''></script> <script type=''text/javascript'' src=''scriptaculous/scriptaculous.js''></script> </head> <body> <div id=''el1''>I''m element 1</div> <div id=''el2''>I''m element 2</div> <script type=''text/javascript''> var el=$("el1"); el.style.border=''solid red 2px''; new Draggable(el); var el2=$("el2"); el2.style.backgroundColor=''gray''; Event.observe( el,''mousemove'', function(){ el2.innerHTML=el.offsetLeft+" x "+el.offsetTop; } ); </script> </body> </html> You can drag element 1 around the screen, and element 2 should update with it''s coordinates. In Firefox (and Konqueror FWIW), it responds pretty snappily, with the numbers rolling along as you move. Under IE7, it looks like it takes half a second or so for the coordinates to update themselves after the drag operation has stopped. - I don''t have IE6 to hand to check if this is a new ''feature'' (IE7 seems to be full of them). In your case, the lag can probably be worked around - I assume you''re not trying to talk to the database in real time, but only after the drop operation. HTH Dave -- ---------------------- Author Ajax in Action manning.com/crane Ajax in Practice manning.com/crane2 Prototype & Scriptaculous Quickly manning.com/crane3 --~--~---------~--~----~------------~-------~--~----~ You received this message because you are subscribed to the Google Groups "Ruby on Rails: Spinoffs" group. To post to this group, send email to rubyonrails-spinoffs-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org To unsubscribe from this group, send email to rubyonrails-spinoffs-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org For more options, visit this group at groups.google.com/group/rubyonrails-spinoffs?hl=en -~----------~----~----~----~------~----~------~--~---
Daniel Haller
2007-Jan-16 23:47 UTC
Re: X/Y-position of an element after dragging with scriptacolous
Hi Dave, thanks for your help - from the Author of "Ajax in Action" in person. Your book is on my Amazon Wishlist for weeks, really... I''m really impressed :-)> In your case, the lag can probably be worked around - I > assume you''re not > trying to talk to the database in real time, but only after the drop > operation.Yes, this is correct. Your example exactly fits my needs ;-) But your example brings me to a quite pragmatic question...: How can I access variables from the inline-function? Here''s what I got now: /* ----------------- */ Event.observe($(''notice''),''mousemove'', function() { posX = $(''notice'').offsetLeft; posY = $(''notice'').offsetTop; $(''notice_content'').innerHTML = posX+"/"+posY; } ) /* ----------------- */ posX and posY are now storing the correct position of my element, I can check this by printing them out via innerHTML. But if I try to use posX/posY OUTSIDE of the Event.observe (f.e. with a simple alert(posX)), JS throws an error "posX not defined". Is there a good way to handle this? I''m pretty new to JS/DOM Scripting, so please excuse if this is a newbie question... :-/ Daniel> > HTH > > Dave > -- > ---------------------- > Author > Ajax in Action manning.com/crane > Ajax in Practice manning.com/crane2 > Prototype & Scriptaculous Quickly manning.com/crane3 > > >--~--~---------~--~----~------------~-------~--~----~ You received this message because you are subscribed to the Google Groups "Ruby on Rails: Spinoffs" group. To post to this group, send email to rubyonrails-spinoffs-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org To unsubscribe from this group, send email to rubyonrails-spinoffs-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org For more options, visit this group at groups.google.com/group/rubyonrails-spinoffs?hl=en -~----------~----~----~----~------~----~------~--~---
Dave Crane
2007-Jan-17 11:33 UTC
Re: X/Y-position of an element after dragging with scriptacolous
On Tuesday 16 January 2007 23:47, Daniel Haller wrote:> Hi Dave, > > thanks for your help - from the Author of "Ajax in Action" in person. > Your book is on my Amazon Wishlist for weeks, really... > I''m really impressed :-) >shucks, you''ll make me blush...> But your example brings me to a quite pragmatic question...: > How can I access variables from the inline-function? > > Here''s what I got now: > > /* ----------------- */ > Event.observe($(''notice''),''mousemove'', function() { > posX = $(''notice'').offsetLeft; > posY = $(''notice'').offsetTop; > $(''notice_content'').innerHTML = posX+"/"+posY; } > ) > /* ----------------- */ > > posX and posY are now storing the correct position of my element, I can > check this by printing them out via innerHTML. > But if I try to use posX/posY OUTSIDE of the Event.observe (f.e. with a > simple alert(posX)), JS throws an error "posX not defined". > > Is there a good way to handle this? I''m pretty new to JS/DOM Scripting, > so please excuse if this is a newbie question... :-/ >The simple solution is to declare posX and posY as global variables, i.e. <html> <head> <script type=''text/javascript'' src=''prototype/prototype.js''></script> <script type=''text/javascript'' src=''scriptaculous/scriptaculous.js''></script> </head> <body> <div id=''el1''>I''m element 1</div> <div id=''el2''>I''m element 2</div> <script type=''text/javascript''> var posX=null; // HERE''S THE GLOBAL VARS var posY=null; var el=$("el1"); el.style.border=''solid red 2px''; new Draggable(el); var el2=$("el2"); el2.style.backgroundColor=''gray''; Event.observe( el,''mousemove'', function(){ posX=el.offsetLeft; //SET THEM HERE posY=el.offsetTop; el2.innerHTML=posX+" x "+posY; } ); function alertCoords(){ alert("coordinates are ["+posX+","+posY+"]"); } </script> <a href=''javascript:alertCoords()''>get Coords</a> </body> </html> In the anonymous mousemove function, I set the values of these globals. I''ve then added a second function called alertCoords(), which will make use of them (I imagine you''ll want to do something more sophisticated than alert(), but you get the idea...). I''ve then added a hyperlink to let you call that alertCoord() function, just to check that it all works correctly. Scoping rules for JavaScript are fairly unremarkable on the whole (apart from closures, which I won''t go into now). So if you want to access your variables outside a given scope, declare them outside it. Same approach as a lot of languages I''ve come across (PHP is the odd one out here, with the global keyword, which is always tripping me up.) Using global variables in this way is a punishable offence from a design perspective, of course (and, yes, el and el2 are globals too). As your code grows, you don''t want to have hundreds of globals littering up your script, so roll your code up into objects, or at least define the globals as higher-level structures, e.g. var dragPosition={ x: null, y:null }; and then in the event handler dragPosition.x=el.offsetLeft; and so on. Overkill in a little example like this, maybe, but a goosd habit to get into for when your code is big enough to fit into several .js files, or might be reused across multiple projects. Again, that''s a general principle, rather than a Javascript-specific issue. HTH Dave ---------------------- Author Ajax in Action manning.com/crane Ajax in Practice manning.com/crane2 Prototype & Scriptaculous Quickly manning.com/crane3 --~--~---------~--~----~------------~-------~--~----~ You received this message because you are subscribed to the Google Groups "Ruby on Rails: Spinoffs" group. To post to this group, send email to rubyonrails-spinoffs-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org To unsubscribe from this group, send email to rubyonrails-spinoffs-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org For more options, visit this group at groups.google.com/group/rubyonrails-spinoffs?hl=en -~----------~----~----~----~------~----~------~--~---
Daniel Haller
2007-Jan-17 16:49 UTC
Re: X/Y-position of an element after dragging with scriptacolous
Hi Dave,> > Your book is on my Amazon Wishlist for weeks, really... > > I''m really impressed :-)> shucks, you''ll make me blush...In germany we call this "jemandem Honig ums Maul schmieren" - in a literal interpretation this means "greasing honey around s.o. mouth", in english it means "to butter s.o. up", afaik ;-)> The simple solution is to declare posX and posY as global > variables, i.e.yes, it works! Thank you very much. Now I can use the Ajax.inplaceEditor, writing Form-Values and Position of the Memo into my database like this: /* Ajax Inplace-Editor */ new Ajax.InPlaceEditor(notice_content, ''/index.php?action=save_notice&qstn=''+question_id, { okText:"Speichern",cols:25,rows:10,cancelText:"[Verwerfen]", loadTextURL:"/index.php?action=get_notice_txt&qstn_id="+question_id+"&us er_id="+user_id+"&plain_text=true", loadingText:"Lade Inhalt...", savingText:"Speichere Notiz...<br/><img src=''/media/img/notice_progress.gif'' />", highlightendcolor:''#FFFF00'',highlightcolor:''#FFFFC1'', callback: function(notice_content, value) { return ''value=''+escape(value)+''&x=''+posX+''&y=''+posY } } ); Same approach> as a lot of > languages I''ve come across (PHP is the odd one out here, with > the global > keyword, which is always tripping me up.) > Using global variables in this way is a punishable offence > from a design > perspective, of course (and, yes, el and el2 are globals > too).Yes, I usally code PHP - and I know, that globals are mostly "bad". But in this case, I accept that. I''m still learning, and for the beginning this solution is ok. Especially ''cause this is no production code... only for "personal use" ;-) As your code> grows, you don''t want to have hundreds of globals littering > up your script, > so roll your code up into objects, or at least define the globals as > higher-level structures, e.g.thanks for this alternative - I''ll have a look at it, I think... Cheers, Daniel --~--~---------~--~----~------------~-------~--~----~ You received this message because you are subscribed to the Google Groups "Ruby on Rails: Spinoffs" group. To post to this group, send email to rubyonrails-spinoffs-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org To unsubscribe from this group, send email to rubyonrails-spinoffs-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org For more options, visit this group at groups.google.com/group/rubyonrails-spinoffs?hl=en -~----------~----~----~----~------~----~------~--~---