# AJAX Drag and Drop Detecting Drop Coordinates

**URL:** <https://www.ruby-forum.com/t/ajax-drag-and-drop-detecting-drop-coordinates/51368>\
**Category:** Rails\
**Created:** [December 30, 2005, 9:13am UTC](https://www.ruby-forum.com/t/ajax-drag-and-drop-detecting-drop-coordinates/51368 "2005-12-30T09:13:21Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![afewtips](https://www.ruby-forum.com/letter_avatar_proxy/v4/letter/a/76d3ee/32.png) [@afewtips](https://www.ruby-forum.com/u/afewtips)\
**Post date:** [December 30, 2005, 9:13am UTC](https://www.ruby-forum.com/t/ajax-drag-and-drop-detecting-drop-coordinates/51368/1 "2005-12-30T09:13:21Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![afewtips](https://www.ruby-forum.com/letter_avatar_proxy/v4/letter/a/76d3ee/32.png) [@afewtips](https://www.ruby-forum.com/u/afewtips)\
**Post date:** [December 30, 2005, 10:35am UTC](https://www.ruby-forum.com/t/ajax-drag-and-drop-detecting-drop-coordinates/51368/2 "2005-12-30T10:35:37Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![afewtips](https://www.ruby-forum.com/letter_avatar_proxy/v4/letter/a/76d3ee/32.png) [@afewtips](https://www.ruby-forum.com/u/afewtips)\
**Post date:** [January 16, 2006, 3:51pm UTC](https://www.ruby-forum.com/t/ajax-drag-and-drop-detecting-drop-coordinates/51368/3 "2006-01-16T15:51:59Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![afewtips](https://www.ruby-forum.com/letter_avatar_proxy/v4/letter/a/76d3ee/32.png) [@afewtips](https://www.ruby-forum.com/u/afewtips)\
**Post date:** [December 31, 2005, 6:26am UTC](https://www.ruby-forum.com/t/ajax-drag-and-drop-detecting-drop-coordinates/51368/4 "2005-12-31T06:26:53Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![afewtips](https://www.ruby-forum.com/letter_avatar_proxy/v4/letter/a/76d3ee/32.png) [@afewtips](https://www.ruby-forum.com/u/afewtips)\
**Post date:** [January 16, 2006, 4:15pm UTC](https://www.ruby-forum.com/t/ajax-drag-and-drop-detecting-drop-coordinates/51368/5 "2006-01-16T16:15:50Z")

</div>

On 1/16/06, michael lascarides [removed\_email\_address@domain.invalid](mailto: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/](http://www.ruby-forum.com/).
> 
> * * *
> 
> Rails mailing list  
> removed\_email\_address@domain.invalid  
> [http://lists.rubyonrails.org/mailman/listinfo/rails](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.