Create a HTML user interface based on a simple design.
The user can drag&drop items from a library to a list. Use jQuery Sortable and Draggable in the implementation. All click events and drag&drop actions are noticed client side and will result in a jQuery ajax call, to a WebMethod in an aspx page.
For more information on the design, see the attached power point. It will be possible to communicate extensively during development, using google talk or skype, for answering all the functional and technical questions.
## Deliverables
Create a HTML user interface based on the design as shown in the power point.
Criteria:
1. Library panel (the list on the right)
a. The items in the conversation steps Library are populated using WebMethod in an C# aspx page;
b. The WebMethod may be implemented using hard-coded values to populate the lists; later we will replace the hardcoded functions with services ourselves. The code will be replaced later by ourselves using our own platform API;
c. The user can drag&drop items from the library to the list on the left. Use jQuery Sortable and Draggable ([login to view URL]) to do so;
d. All click events and drag&drop actions are noticed client side and will result in a jQuery ajax call, to WebMethod in an aspx page on the server;
2. Conversation panel (on the left)
a. While hovering over conversation steps, blue arrows appear on the left and red arrows on the right (see attached power point). These arrows show the previous step in blue and possible next destination(s) in red;
b. A click on an arrow or line will result in a jQuery ajax call, to WebMethod in an aspx page on the server;
c. The conversations steps can be sorted using jQuery Sortable and Draggable;
3. Details panel
a. The panel which says "Details - Name" is not in scope of this project.
4. In general:
a. Use ajax (jQuery and JSON) for all communications from the web client to the server;
b. Style the page using jQuery UI css, see <[login to view URL]>;
c. The lay-out and look&feel needs to be well designed an pretty to look at (e.g. round corners, shadows, etc.);