Rails - Dec 2005 - AJAX Drag and Drop Detecting Drop Coordinates

This one''s kicking me in the *(&#^.  All I want to do is create a
draggable
item and then detect the coordinates where it is dropped.  So my first
approach was to just use the draggable_element with :revert => false, like
so:

<%= draggable_element "my_element", :revert => false %>

That works great and lets me drag stuff all over the place.  In the
scriptaculous docs it states that revert can be set to a function.  I tried
that with something like:

<%= draggable_element "my_element", :revert => remote_function(
:url => {
:action => drag_end }) %>

That may not be exact but you get the idea.  Well that called my drag_end
method, but it seemed to be calling it multiple times, even when not
triggered.  It also didn''t give me any information on the draggable
element.
I even tried it with :snap which should pass in x and y, but no luck

I took another approach and created a droppable area.  Doing something like:

<%= drop_receiving_element "my_page",
      :url => { :action => "drag_end" }
       %>

Well that works in giving me the id of the draggable element, but I still
can''t figure out how to get the x and y coordinates of the item at its
drop
location.  The information is in there, and using straight javascript it
would be possible to use the onDrop function accessing the element.x /
element.y information, but I would prefer to have it callback to the
controller and do it there.  (BTW, I spent forever seeing if I could create
a callback but it doesn''t appear to be supported by the drag / drop
stuff,
but I could be missing something.)

Any help would be greatly appreciated.

Michael Trier


_______________________________________________
Rails mailing list
Rails-1W37MKcQCpIf0INCOvqR/iCwEArCW2h5@public.gmane.org
http://lists.rubyonrails.org/mailman/listinfo/rails

Michael Trier wrote:
> <%= draggable_element "my_element", :revert =>
remote_function( :url =>
> {
> :action => drag_end }) %>
 What about changing the above to:
<%= draggable_element "my_element", :revert => remote_function(
:url =>
 {
 :action => drag_end, :x=> element.x, :y=>element.y }) %>
I on''t think that will work, but something similiar should.

-- 
Posted via http://www.ruby-forum.com/.

The following staight js code does what I need:

Droppables.add(''my_page'', {onDrop:function(element){new
Ajax.Request(''/my_controller/move_it'',
{asynchronous:true, evalScripts:true, parameters:''id='' +
encodeURIComponent(
element.id) + ''&x='' +
encodeURIComponent(element.style.left) + ''&y='' +
encodeURIComponent(element.style.top) })}})

Anyone know how to translate this into a drop_receiving_element method?

I''ve tried every which way I could think of.  The solution probably has
to
do with the :with option, but I can not make it work.

Michael Trier

On 12/30/05, joey__ <cardologist@gmail.com> wrote:
>
> Michael Trier wrote:
> > <%= draggable_element "my_element", :revert =>
remote_function( :url =>
> > {
> > :action => drag_end }) %>
> What about changing the above to:
> <%= draggable_element "my_element", :revert =>
remote_function( :url =>
> {
> :action => drag_end, :x=> element.x, :y=>element.y }) %>
> I on''t think that will work, but something similiar should.
>
> --
> Posted via http://www.ruby-forum.com/.
> _______________________________________________
> Rails mailing list
> Rails@lists.rubyonrails.org
> http://lists.rubyonrails.org/mailman/listinfo/rails
>
-------------- next part --------------
An HTML attachment was scrubbed...
URL:
http://wrath.rubyonrails.org/pipermail/rails/attachments/20051231/181cebe8/attachment.html

Michael,
> Anyone know how to translate this into a drop_receiving_element method?
> 
> I''ve tried every which way I could think of.  The solution
probably has
> to
> do with the :with option, but I can not make it work.
I am making an editable photo gallery layout, and after an all-nighter 
wrestling with the same issue, I found a solution. It is indeed the 
:with option. Just take the "parameters:" bit out of your .js and move
them to the :with parameter. Here is my resulting drop_receiving_element 
code (broken on to several lines for legibility):

<%= drop_receiving_element("gallery",
:url => { :action => "reposition" },
:loading => visual_effect(:highlight),
:update => ''admin_status_message'',
:with => "''id='' + encodeURIComponent(element.id)
+ ''&x='' +
encodeURIComponent(Element.getStyle(element,''left''))
+ ''&y='' +
encodeURIComponent(Element.getStyle(element,''top''))
+ ''&w='' +
encodeURIComponent(Element.getStyle(element,''width''))
+ ''&h='' +
encodeURIComponent(Element.getStyle(element,''height''))")
%>

Note one twist... "element.style.top" syntax doesn''t work
here, so I
switched it for "Element.getStyle(element,''top'')"
syntax instead. Must
be a scope issue, but I am too tired to dig into it further.

This code sends the following parameters to the ''reposition''
action
(output of debug(params) shown):

w: 100px
x: 0px
y: 50px
action: reposition
id: foto_1
controller: admin
h: 105px

Thanks for the hint on the :with option, without which I would not have 
found it. Hope this helps!

- Michael L.


-- 
Posted via http://www.ruby-forum.com/.

On 1/16/06, michael lascarides <michael@electrotone.com>
wrote:
>
>
> Michael,
>
> > Anyone know how to translate this into a drop_receiving_element
method?
> >
> > I''ve tried every which way I could think of.  The solution
probably has
> > to
> > do with the :with option, but I can not make it work.
>
> I am making an editable photo gallery layout, and after an all-nighter
> wrestling with the same issue, I found a solution. It is indeed the
> :with option. Just take the "parameters:" bit out of your .js and
move
> them to the :with parameter. Here is my resulting drop_receiving_element
> code (broken on to several lines for legibility):
>
> <%= drop_receiving_element("gallery",
> :url => { :action => "reposition" },
> :loading => visual_effect(:highlight),
> :update => ''admin_status_message'',
> :with => "''id='' + encodeURIComponent(element.id)
> + ''&x='' +
encodeURIComponent(Element.getStyle(element,''left''))
> + ''&y='' +
encodeURIComponent(Element.getStyle(element,''top''))
> + ''&w='' +
encodeURIComponent(Element.getStyle(element,''width''))
> + ''&h='' +
encodeURIComponent(Element.getStyle(element,''height''))")
%>
>
> Note one twist... "element.style.top" syntax doesn''t
work here, so I
> switched it for
"Element.getStyle(element,''top'')" syntax instead.
Must
> be a scope issue, but I am too tired to dig into it further.
>
> This code sends the following parameters to the
''reposition'' action
> (output of debug(params) shown):
>
> w: 100px
> x: 0px
> y: 50px
> action: reposition
> id: foto_1
> controller: admin
> h: 105px
>
> Thanks for the hint on the :with option, without which I would not have
> found it. Hope this helps!
>
> - Michael L.
>
>
> --
> Posted via http://www.ruby-forum.com/.
> _______________________________________________
> Rails mailing list
> Rails@lists.rubyonrails.org
> http://lists.rubyonrails.org/mailman/listinfo/rails
>

Ahh, you''re a genius.  This line is the trick:

encodeURIComponent(Element.getStyle(element,''left''))

I was trying, like you, to access it directly and was getting nowhere.  I
ended up getting an implementation in place, but I just fell back to the
straight JavaScript (using Scriptaculous) for those elements.

Thanks so much.

Michael Trier
-------------- next part --------------
An HTML attachment was scrubbed...
URL:
http://wrath.rubyonrails.org/pipermail/rails/attachments/20060116/83b68859/attachment-0001.html