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

Updated . Posted . Visible to the public.

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

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.
Henning Koch
Last edit
License
Source code in this card is licensed under the MIT License.
Posted by Henning Koch to makandra dev (2012-07-21 16:26)