Moving and reordering content

1. UX - Moving interaction

Problems

• Drag and drop alone is not enough
  • lacks affordance
  • must not conflict with other interactions, e.g. selection, scroll gestures
  • does not feel fluid for long distances (esp. on touch devices)
• Drag and drop is error prone
  • especially on sensitive areas like configuration, you don't want to mess things up so easily
• Missing spec for moving nodes through an action (e.g. in the action bar)
  • potentially using keyboard only
  • also thought for touch
• Related: The Duplicate action hardly solves copying use cases
  • more targeted at content (e.g. news page) than e.g. configuration

Options

• Programmatic "start-drag" from the server-side
  
  • doesn't solve anything on touch devices
    
    • sticky row with touch move, seriously?
    • the sticky row could be available somewhere to grab it again with drag and drop
      
      • maybe having scrolled to the proper position beforehand
    • dropping is still approximate
  • not supported by Vaadin out of the box
  • client-side code is there and accessible (can be done easily with rpc invocation, and without patch)
• Cut (Copy) & Paste
  
  • Steps
    
    • Select row
    • Press "Cut" or "Copy", visually marks currently selected row(s)
    • Select target item
    • Press "Paste"
    • More options? (Drop above, inside, below)
      
      • Related: Action bar progressive disclosure
  • Well established
  • Our trees are ordered
    
    •  we need to cover the use case for reordering under the same parent
  • Keyboard shortcuts
    
    • Can we hijack Cmd+X,C,V shortcuts?
  •  Implement as a basic clipboard (subapp-scoped)
  •  we don't implement Cut
  •  we implement Paste as Paste IN, as most people expect
    
    • goes to the end (of its same content-type siblings)
    • makes sure pasted item is selected + visible
      
      • fix duplicate as well
  •  We fix ordering and groups in the action bar once we have basic impl
  •  Move up/down actions
  • Paste + Paste after
• Same move actions as in page editor
• Hybrid Move & Drop variant
  
  • Steps
    
    • Select row
    • Press "Move", visually marks currently selected row(s)
    • Right click/Hold target, displays an action popup with dropping options
    • Press "Drop above", "Drop within" or "Drop below"
  • Less intuitive than cut & paste
  • technically challenging (specific mouse and touch handlers on the client-side)

2. UI - Drag and Drop

Problems

• Unable to locate Jira server for this macro. It may be due to Application Link configuration.
  
  • Automatic scrolling while dragging is unfortunately not supported in Vaadin Table
  • Manual scrolling while dragging seems to be supported, although requiring dexterity
• Unable to locate Jira server for this macro. It may be due to Application Link configuration.
  
  • This is also the occasion to apply proper coloring there, instead of the default.
• Unable to locate Jira server for this macro. It may be due to Application Link configuration.
• Drag and drop doesn't work as good with touch
  
  • already uses a timer, might be too short though
  • lacks visual indication
  • conflicts with table scroll / sometimes even page scroll

Options

• Do not invest in automatic scrolling until new Tables from Vaadin are there
  • Vaadin 7.2?

3. IMPL - Moving logic

Problems

• Unable to locate Jira server for this macro. It may be due to Application Link configuration.
  
  • existing moving logic must be placed there, and must be invoked through action execution
• Unable to locate Jira server for this macro. It may be due to Application Link configuration.
• Categories cannot be dropped onto other categories
• Unable to locate Jira server for this macro. It may be due to Application Link configuration.
  
  • TODO: create issues in various content-app projects

References

• The following page-editor story has a rather similar interaction pattern for moving components, either through drag and drop or the move action (disclaimer: in component bar, not from action bar).
  
  • Unable to locate Jira server for this macro. It may be due to Application Link configuration.
• DataTables is a nice jQuery-based table component, highly flexible and configurable, and easy to populate in various ways.
  
  • Although we cannot use it easily in our setup, it might be a useful example for keeping feature-rich components (like tables) dry, open and easy to use.