The attached example presents the user with a two-level hierarchical view of data and uses ULV to implement the following:
It solves two issues with presenting the data while allowing the user to drag/drop to reposition items and swipe to delete items:
- Showing the hierarchy using indentation of sub-items
- Drag/Drop reordering of items in the hierarchy
- Swipe left/right to delete items
It solves two issues with presenting the data while allowing the user to drag/drop to reposition items and swipe to delete items:
- How to enforce the hierarchy constraints without frustrating the user. As the user drags an items up and down the list, the item is shown at the current position either shaded or colored red, the red indicating that the item cannot be dropped at that position.
- How to allow the user to drag a leaf to a specific position inside or outside of a branch. In particular, how to allow the user to drop a leaf at the end of a set of leaf nodes inside a branch or to drop a leaf just past the end of the leaf nodes within a branch - the drop position in both cases is the same! The implemented solution is to add an "end of group" item which marks the end of a group of leaf nodes within a branch, making it part of the drag/drop operation but not able to be otherwise manipulated. The user can then drop before the "end of group" to add the leaf to a branch, or can drop after the "end of group" to add the leaf at the top level positioned after the leaf nodes within the branch.