Complex drag & drop GUI
- Status: Closed
- Præmier: €250
- Modtagne indlæg: 5
- Vinder: ohmed
Example: [login to view URL]
The tree shows the contents of a photo-website, the branches representing the pages and the leaves representing photos.
Because the size of the tree is variable, it should be possible to zoom in or out with an on-screen slider. The interface should still work smoothly if the tree contains 500+ nodes.
An Ajax connection will update changes made in the tree to the database.
Required base functions:
- Rearrange nodes (i.e. the order of photos) with drag & drop.
- Add nodes (upload photos) by dragging them into the canvas.
- Create a new page by dragging the 'New page' button into the canvas.
- Delete a node by dragging it into the bin.
- Edit a node (i.e. the name of a page) by clicking it.
While editting the tree, the dynamic connector lines and smooth animations must give the user visual cue's about what is happening.
IMPORTANT: The look & feel of the interface should be INTUITIVE AND SMOOTH and the interface should work in all modern browsers, including phone and tablet.
A number of libraries are available, it's up to you if you want to use any of those.
Examples: jsPlumb, [login to view URL], d3.js
This project is only about making a prototype/POC and only about the client side code. If the winner of this project is good enough, he/she will be invited to do all the client-side coding and built the whole interface. This will be a new project with a bigger budget.
All server-side code, for example to update changes in the database, will be part of another follow-up project.
“Satisfied with te results!”