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 Long Term Support

Rails LTS provides security patches for old versions of Ruby on Rails (2.3, 3.2, 4.2 and 5.2)

  • Prevents you from data breaches and liability risks
  • Upgrade at your own pace
  • Works with modern Rubies
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)