Need some work done? Post a Project Today
We have a tree structure that is displayed one branch at a time (the folder name followed by the folder content).
We need to navigate within the tree (enter a subfolder and go back into the parent folder) and move a folder content into another position (within the current folder of into another folder).
NAVIGATION WITHIN THE TREE
Clicking on a folder item that has sub items opens that folder. A swipe (horizontal scroll) animation is applied: the subfolder appears coming from the right.
When clicking on the current folder header, we go back to the parent folder with the same animation in the opposite direction: the parent folder appears from the left.
Using drag&drop, elements can be reordered (for example move the last element at first position). While dragging a shadow element is displayed where the moved element would drop. When the shadow element changes position, an animation swaps it with other elements.
Using the same drag&drop, the user can pause (like 1 second) on a subfolder and we navigate into that subfolder. The same animation (scrolling to the left) applies as if that subfolder was clicked, as described above. If the user pauses on the folder header, we navigate into the parent folder.
The dragged element can obviously not be dropped above the folder header.
When the user drops, a callback is called with the element, its initial and new position. The drop can be cancelled if the callback returns false.
The container has a definite size, and can be changed from external code. Provide a function to update the tree container size.
If there are too much elements to be displayed in the given space, a vertical scrollbar appears. We need a custom JS scrollbar, not the browser default.
GLOBAL THREE REQUIREMENTS
• Compatibility: iOS 5+ (iPad 2+, iPhone 4+), Android (Gingerbread+), IE9+, FF, Chrome, Safari / 100% Touch Screen
• Small, efficient code
• You can use any free code but the final result must be: FAST and a CREATIVE solution. When possible CSS animations should be used for a fluid result. Reduce latency between cursor/finger position and visual clues (dragged element and shadow, animations).
No need for graphic integration (pixel precision), keep plain HTML as in the sample. The aspect must be configurable through CSS. Images are actually specific letters of a custom font.
If you ONLY REUSE existing code on the Internet without creative development, please DO NOT SEND your offer!
The provided TreeNavigation.html is the starting point of this development, which must be compatible with it. Folders and elements are generated dynamically with data binding. The DOM HTML elements should not be manipulated directly. We can assist you and customize the sample if needed.
The PDF shows graphically how the navigation should behave.