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

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,

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.

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.

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.

This forum is not affiliated to the Ruby language, Ruby on Rails framework, nor any Ruby applications discussed here.

| Privacy Policy | Terms of Service | Remote Ruby Jobs