document js drafting

SUMMARY.md

@@ -76,9 +76,10 @@
 * [Breadcrumbs]({%}?page=frontend/elements/breadcrumbs/breadcrumbs)
 * [Progress]({%}?page=frontend/elements/progress/progress)
 * [Layout]({%}?page=frontend/grid/grid)
+* [Drag & Drop]({%}?page=frontend/elements/dragndrop/dragndrop)
 * [Charting]({%}?page=services/charting)
 
 ### Forms
-* [Forms]({%}?page=frontend/elements/forms/forms)
+* [Forms]({%}?page=frontend/forms/forms)
 * [Inputs]({%}?page=frontend/elements/inputs/inputs)
 * [Tables]({%}?page=frontend/elements/tables/tables)

frontend/elements/dragndrop/dragndrop.md

@@ -0,0 +1,29 @@
+# Drag & Drop
+
+Elements can be made drag and droppable which can be helpful to allow users to re-order and re-position elements in a list, table or customize the user interface.
+
+## Container
+
+In order to make elements drag and droppable you must define a container which contains all the drag and droppable elements.
+
+```html
+<div class="dragcontainer">
+</div>
+```
+
+## Draggable elements
+
+Elements which should be draggable in the container must be marked with `draggable="true"`.
+
+```html
+<div class="dragcontainer">
+    <div draggable="true">1</div>
+    <div draggable="true">2</div>
+    <div draggable="true">3</div>
+    <div draggable="true">4</div>
+</div>
+```
+
+> If new draggable elements are dynamically added to the container they automatically get recognized, no additional event binding is necessary.
+
+![Button normal](Developer-Guide/frontend/elements/dragndrop/dragndrop.png)

frontend/forms/forms.md

@@ -0,0 +1,60 @@
+# Forms
+
+## Bindings
+
+data-tag : tells the element how to behave (e.g. turn none-form elements into forms by defining it as "form")
+data-method : method definition for none-form elements (not used for actual forms, where method can be used)
+
+data-marker=tpl : ??? maybe entries which are templates (e.g. inline add or inline edit?) **check**
+data-id : Data id (primary id value, by which it is stored in the database)
+
+data-ui-content
+data-ui-element
+
+data-tpl-text
+data-tpl-value
+data-value
+value
+
+data-add-form : form template to use for the inline add **check**
+data-add-content
+data-add-element
+data-add-tpl
+
+data-update-form : form where updates/changes are handled (this means there is an external form where the data gets copied to for modification)
+data-update-content
+data-update-element
+data-update-tpl
+
+data-tpl-text-path : remote path for the text
+data-tpl-value-path : remote path for the text
+
+
+## Todos
+
+### General
+- [x] Order
+- [ ] Remote order
+- [x] DragDrop
+- [ ] Remote DragDrop
+- [x] Remove
+- [ ] Remote Remove
+- [ ] Remote Update on change (no save button required)
+
+### Heartbeat
+- [ ] Remote adds (heartbeat checks)
+- [ ] Remote updates (heartbeat checks)
+- [ ] Remote removes (heartbeat checks)
+
+### External
+- [x] add
+- [ ] update
+- [ ] remote add
+- [ ] remote update
+- [x] cancel
+
+### Internal
+- [ ] add
+- [ ] update
+- [ ] remote add
+- [ ] remote update