Drag'n'drop in trees: I went to town
For my Gem Session project Holly I ran the Ironman of drag'n'drop implementations:
- Dragging in nested lists
- User-definable order of items
- Items that can be both leaves and containers of other items
- has_ancestry 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.
- 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
- 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.