In Progress

TreeView with Drag and Drop

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).


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.


• 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 [url removed, login to view] 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.

Skills: AJAX, HTML5, Javascript, jQuery / Prototype

See more: treeview drag drop html, html treeview, tree drag drop, use of tree data structure, update ios on ipad 1, tree update, tree in data structure using c, tree data structure example, the new coming iphone, safari browser for android, new ios update, moving from iphone to android, horizontal integration, free navigation for android, free internet on android, folder tree structure, default browser android, data structure for tree, container data structure, chrome for ios, chrome browser for android, android treeview example, android internet browser, android gingerbread, android font

About the Employer:
( 8 reviews ) Fontenay-aux-Roses, France

Project ID: #4311959

Awarded to:


Hi .i'm a jQuery developer with 2 years experience . i can do this with best quality to you.i'm ready to start if you're interested !

€200 EUR in 7 days
(6 Reviews)

6 freelancers are bidding on average €234 for this job


Hi! I'm interested in it

€250 EUR in 4 days
(64 Reviews)

php/mysql team

€250 EUR in 4 days
(99 Reviews)

Hi, we have expertise in HTML5 / CSS3 (Mobile Browser Compatible), jQuery, iPhone Apps, Android Apps & iPad Apps Development, PHP, MySQL, .Net, OsCommerce, Wordpress, Joomla, Drupal, Magento, ZenCart. You can see m More

€250 EUR in 12 days
(27 Reviews)

Hello, We have gone through project requirements. we having lots of experience to complete this project . Our team is very much interested to carry out your job by targeting on time delivery along with perfection of pr More

€185 EUR in 10 days
(13 Reviews)

Hello , Hope you are well and doing good!!! we are eager to work with you.We are ready to start the project right away. Codeware is a website development company providing professional website design, website developme More

€180 EUR in 4 days
(9 Reviews)

I have 4+ experienced developer to do this project very well. Check pmb.

€170 EUR in 3 days
(0 Reviews)

Hi Hope you are doing good today,thanks for considering my bid Let me rephrase what you want 1)A folder/tree structure... 2)Clicking/pausing on a folder displays the subfolders from right to left with a horizon More

€270 EUR in 5 days
(1 Review)