Read more

Drag'n'drop in trees: I went to town

Henning Koch
July 21, 2012Software engineer at makandra GmbH

For my Gem Session project Holly Show archive.org snapshot I ran the Ironman of drag'n'drop implementations:

  • Dragging in nested lists
  • User-definable order of items
  • Complicated item elements with super-custom CSS and other Javascript functionality
  • Items that can be both leaves and containers of other items
  • has_ancestry Show archive.org snapshot on the server side
Illustration online protection

Rails professionals since 2007

Our laser focus on a single technology has made us a leader in this space. Need help?

  • We build a solid first version of your product
  • We train your development team
  • We rescue your project in trouble
Read more Show archive.org snapshot

Things I learned:

  • Be ready to write a lot of CSS. You need to indicate what is being dragged, where it will be dropped, if it is dropped above, below or nested into another item. These are a lot of styles that need to be pretty.
  • The standard drag'n'drop solution from jQuery UI (draggable/droppable) do not work well for nested lists. Nor do they give you precise enough control e.g. to distinguish if an element will be dropped above, below or onto another item. I ended up using only draggable and reimplement something like droppable in ~120 lines of Javascript.
  • There is some drag'n'drop support in Capybara/Selenium nodes, but again it's not precise enough to distinguish if an element will be dropped above, below or onto another item. You'll need to emulate drag/drop events (mouseup/mousedown) with evaluate_script and jQuery.
  • You must make some hard UI decisions when your items can be both leaf nodes and containers of other items. E.g. how can a user tell your app to drop below a future sibling vs. nest into a future parent? I'm quite happy how it works in Holly, but then again my target audience are nerds.
Posted by Henning Koch to makandra dev (2012-07-21 18:26)