How to create dynamic drag and drop templates?

Question

I have a requirement of developing a functionality where user can dynamically define a template (labels, textboxes, labels, rows, columns, parent child relationships among above elements etc). These elements(such as combo boxes) may be bound to different database tables.

For example, the user may define a template T1 for a specific use case U1. But this template is not restricted to U1 only. It may be needed to be used in another use case U2, where it is a sub part of a bigger template.

Once the templates are defined, another user may load the templates (HTML form) and enter data into it. At a later stage, I need to reuse this data and template to generate PDF reports. Since PDF reports may sometimes need to have a different layout than the HTML form, I would need parent child relationships between elements as well.

As of now, we are achieving by generating an XML from a user interface where a user can select elements from a dropdown and specify properties. At run time, these XML are transformed to HTML using XSLT. Another XSLT is used for generating PDFs. The limitation of this scheme is that it is very tedious to incorporate any user requests (such as multiple columns, add tables into forms etc).

I was wondering how other people achieve this and is there an API/Library for doing the same ? I have looked at HTML5 and JQuery drag and drop features, but it would require me to add everything from scratch (such as dynamically add columns,rows etc.)

Answer 1

The best thing to create dynamic form is using angular js. It is very good framework for front end development

Here is the working link for angular js form

Sorry, I only gave example form dynamic forms here are some example for drag and drop Angular drag and drop 1

Angular drag and drop 2

http://angular-js.in/dragular/

I hope this will help.