The main aim of this deliverable is to create a simple HTML page that demonstrates the drag-and-drop feature of JQuery framework
The Layout developed includes all the basic functionality of the drop downs and the drag and drops. The complete layout of the IDE is mainly categorized as the following:
The Horizontal navigation bar is the one, similar to that of any IDE. The bar includes file, edit, search, project, and help. Each, in turn, has its own drop down of options.
The Left most part of the IDE has files and controllers. Files consist of project folders and tables. When a new table is created by drag and drop, it will be added to a project folder. New files are also created in a similar way as tables. Controllers have different files (file 1 and file 2.) and each file has different functions. These functions can be dragged and dropped on to the canvas, and when a new function is created; it gets added to that particular file. All the functions inside a file can be viewed by placing the mouse on the file. This can be achieved by using the method onmousever ().
The right most part of the IDE has HTML elements. Users can create these Html elements without having any prior knowledge in XHTML .It has various elements like title, button, table and file.The top part of the IDE has a navigation tool bar. It is a horizontal and standard menu bar. The top-level menu items are next to each other from left to right, and all other submenu items are stacked vertically
This project will be used for the future work in implementing my final web-based ide.
The code can be obtained from the following link.
Download the Drag and Drop code rar