Forum: Ruby on Rails AJAX Drag and Drop Detecting Drop Coordinates

Announcement (2017-05-07): www.ruby-forum.com is now read-only since I unfortunately do not have the time to support and maintain the forum any more. Please see rubyonrails.org/community and ruby-lang.org/en/community for other Rails- und Ruby-related community platforms.
Michael T. (Guest)
on 2005-12-30 10:13
(Received via mailing list)
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 T.
joey__ (Guest)
on 2005-12-30 11:35
Michael T. 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.
Michael T. (Guest)
on 2005-12-31 07:26
(Received via mailing list)
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 T.
Michael L. (Guest)
on 2006-01-16 16:51
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.
Michael T. (Guest)
on 2006-01-16 17:15
(Received via mailing list)
On 1/16/06, michael lascarides <removed_email_address@domain.invalid> 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
> removed_email_address@domain.invalid
> 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 T.
This topic is locked and can not be replied to.