Drag and Drop Element Coordinates

Rails
1

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

2

have you looked at the 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://api.rubyonrails.org/classes/ActionView/Helpers/ScriptaculousHelper.html

3

If its information on raw javascript code you’re after

www.quirksmode.org

Will also tell you wether your solution is crossbrowser

4

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

5

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