AJAX Drag and Drop Detecting Drop Coordinates

Rails
1

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.

2

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.

3

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.
4

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.

5

On 1/16/06, michael lascarides [email protected] 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
[email protected]
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.