# Drag and Drop Element Coordinates

**URL:** <https://www.ruby-forum.com/t/drag-and-drop-element-coordinates/88287>\
**Category:** Rails\
**Created:** [March 9, 2007, 12:54pm UTC](https://www.ruby-forum.com/t/drag-and-drop-element-coordinates/88287 "2007-03-09T12:54:12Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![andrew](https://www.ruby-forum.com/letter_avatar_proxy/v4/letter/a/f19dbf/32.png) [@andrew](https://www.ruby-forum.com/u/andrew)\
**Post date:** [March 9, 2007, 12:54pm UTC](https://www.ruby-forum.com/t/drag-and-drop-element-coordinates/88287/1 "2007-03-09T12:54:12Z")

</div>

Hi,

I am in the middle of a rails based warehouse management system and am  
looking to implement a graphical layout designer.

My idea is that you would be able to drag warehouse elements such as  
racks (represented by various html elements) around the screen and then  
save the placement for future use.

I have the plumbing in place the allow draggable elements however I need  
some pointers with regard to obtaining the elements screen pixel  
position, either relative to the containing div or the entire screen.

It seems obvious there is a javascript solution but was looking for a  
couple of pointers to give me a direction to work towards.

Thanks, Andrew

---

<div class="post-metadata">

**Author:** ![andrew](https://www.ruby-forum.com/letter_avatar_proxy/v4/letter/a/f19dbf/32.png) [@andrew](https://www.ruby-forum.com/u/andrew)\
**Post date:** [March 9, 2007, 2:32pm UTC](https://www.ruby-forum.com/t/drag-and-drop-element-coordinates/88287/2 "2007-03-09T14:32:04Z")

</div>

have you looked at the [script.aculo.us](http://script.aculo.us) drag/drop js library? it’s  
distributed with RoR and there are even helpers in RoR for it.

[http://wiki.script.aculo.us/scriptaculous/show/DragAndDrop](http://wiki.script.aculo.us/scriptaculous/show/DragAndDrop)

[http://api.rubyonrails.org/classes/ActionView/Helpers/ScriptaculousHelper.html](http://api.rubyonrails.org/classes/ActionView/Helpers/ScriptaculousHelper.html)

---

<div class="post-metadata">

**Author:** ![andrew](https://www.ruby-forum.com/letter_avatar_proxy/v4/letter/a/f19dbf/32.png) [@andrew](https://www.ruby-forum.com/u/andrew)\
**Post date:** [March 9, 2007, 2:40pm UTC](https://www.ruby-forum.com/t/drag-and-drop-element-coordinates/88287/3 "2007-03-09T14:40:05Z")

</div>

If its information on raw javascript code you’re after

[www.quirksmode.org](http://www.quirksmode.org)

Will also tell you wether your solution is crossbrowser

---

<div class="post-metadata">

**Author:** ![andrew](https://www.ruby-forum.com/letter_avatar_proxy/v4/letter/a/f19dbf/32.png) [@andrew](https://www.ruby-forum.com/u/andrew)\
**Post date:** [March 9, 2007, 4:39pm UTC](https://www.ruby-forum.com/t/drag-and-drop-element-coordinates/88287/4 "2007-03-09T16:39:41Z")

</div>

Andrew:

If you’re using draggable\_element, you’ll give it a name. For  
instance, if you had a big grid, you could use this for every x and y  
value.  
\<%= draggable\_element “location\_1\_1”, :revert =\> true %\>

This would be the draggable\_element:

Drag Me

You can use the same element as a receiver that responds with an  
action when a draggable\_element is dropped onto it:  
\<%= drop\_receiving\_element “location\_1\_1”, :url =\> { :action =\>  
“update\_location”, :new\_x =\> 1, :new\_y =\> 1} %\>

Then you can handle assigning the dragged (new) to dropped spot (old).  
def update\_location  
div, @oldrow, @oldslot = params[:id].split("\_")  
@newrow, @newslot = params[:newrow], params[:newslot]  
@newloc = Location.find\_by\_row\_and\_slot(@newrow, @newslot)  
# do a page.redirect\_to or page.update so show the updates we just  
made  
end

I’ve used this for about a year and it’s pretty handy.

Hope this helps! Let me know if you have any questions.

– Wes

---

<div class="post-metadata">

**Author:** ![andrew](https://www.ruby-forum.com/letter_avatar_proxy/v4/letter/a/f19dbf/32.png) [@andrew](https://www.ruby-forum.com/u/andrew)\
**Post date:** [March 9, 2007, 4:51pm UTC](https://www.ruby-forum.com/t/drag-and-drop-element-coordinates/88287/5 "2007-03-09T16:51:43Z")

</div>

Hmm, looking through my old code, I had two separate divs, one to drag  
and one to receive.  
So, that’s the way I had it working. That said, I don’t know if the a  
single one doing both won’t work, it’s just not the way I did it  
before.

– Wes