thr3ads.net - Rails spinoffs - X/Y-position of an element after dragging with scriptacolous [Jan 2007]

If this information is useful, please help other people find it:
Share via:

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
http://groups.google.com/group/rubyonrails-spinoffs?hl=en
-~----------~----~----~----~------~----~------~--~---

Dave Crane

2007-Jan-16 09:14 UTC

head link

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 http://manning.com/crane
Ajax in Practice http://manning.com/crane2
Prototype & Scriptaculous Quickly http://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
http://groups.google.com/group/rubyonrails-spinoffs?hl=en
-~----------~----~----~----~------~----~------~--~---

Daniel Haller

2007-Jan-16 23:47 UTC

head link

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 http://manning.com/crane
> Ajax in Practice http://manning.com/crane2
> Prototype & Scriptaculous Quickly http://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
http://groups.google.com/group/rubyonrails-spinoffs?hl=en
-~----------~----~----~----~------~----~------~--~---

Dave Crane

2007-Jan-17 11:33 UTC

head link

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 http://manning.com/crane
Ajax in Practice http://manning.com/crane2
Prototype & Scriptaculous Quickly http://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
http://groups.google.com/group/rubyonrails-spinoffs?hl=en
-~----------~----~----~----~------~----~------~--~---

Daniel Haller

2007-Jan-17 16:49 UTC

head link

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
http://groups.google.com/group/rubyonrails-spinoffs?hl=en
-~----------~----~----~----~------~----~------~--~---

Rails spinoffs - Jan 2007 - X/Y-position of an element after dragging with scriptacolous

X/Y-position of an element after dragging with scriptacolous

Re: X/Y-position of an element after dragging with scriptacolous

Re: X/Y-position of an element after dragging with scriptacolous

Re: X/Y-position of an element after dragging with scriptacolous

Re: X/Y-position of an element after dragging with scriptacolous