Forum: Ruby on Rails Drag and Drop Element Coordinates

Announcement (2017-05-07): is now read-only since I unfortunately do not have the time to support and maintain the forum any more. Please see and for other Rails- und Ruby-related community platforms.
8825d6b25723beb41458de56cd85f558?d=identicon&s=25 Andrew (Guest)
on 2007-03-09 12:54

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
A2c85dc5ee81b12e3cc0a6522e8d079d?d=identicon&s=25 Chris Hall (au5lander)
on 2007-03-09 14:32
(Received via mailing list)
have you looked at the drag/drop js library?  it's
distributed with RoR and there  are even helpers in RoR for it.
1d1b310a4dbdc85d3276616b11df69fc?d=identicon&s=25 robert (Guest)
on 2007-03-09 14:40
(Received via mailing list)
If its information on raw javascript code you're after

Will also tell you wether your solution is crossbrowser
A332dcb1e051f733dc9a9bd78df3b560?d=identicon&s=25 wesgarrison (Guest)
on 2007-03-09 16:39
(Received via mailing list)

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
<%=  draggable_element "location_1_1", :revert => true  %>

This would be the draggable_element:
<div id="location_1_1">Drag Me</div>

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

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
A332dcb1e051f733dc9a9bd78df3b560?d=identicon&s=25 wesgarrison (Guest)
on 2007-03-09 16:51
(Received via mailing list)
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

  -- Wes
This topic is locked and can not be replied to.