Ruby Forum Ruby on Rails > 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

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.

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

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.

On 1/16/06, michael lascarides <michael@electrotone.com> wrote:
> I am making an editable photo gallery layout, and after an all-nighter
> + '&x=' + encodeURIComponent(Element.getStyle(element,'left'))
>
>
> - 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