86 lines
3.1 KiB
HTML
86 lines
3.1 KiB
HTML
<!-- Markup for lists inside the dropzone. It's inside a seperate template
|
|
because it will be used recursively. The dnd-list directive enables
|
|
to drop elements into the referenced array. The dnd-draggable directive
|
|
makes an element draggable and will transfer the object that was
|
|
assigned to it. If an element was dragged away, you have to remove
|
|
it from the original list yourself using the dnd-moved attribute -->
|
|
<script type="text/ng-template" id="list.html">
|
|
<ul dnd-list="list">
|
|
<li ng-repeat="item in list"
|
|
dnd-draggable="item"
|
|
dnd-effect-allowed="move"
|
|
dnd-moved="list.splice($index, 1)"
|
|
dnd-selected="models.selected = item"
|
|
ng-class="{selected: models.selected === item}"
|
|
ng-include="item.type + '.html'">
|
|
</li>
|
|
</ul>
|
|
</script>
|
|
|
|
<!-- This template is responsible for rendering a container element. It uses
|
|
the above list template to render each container column -->
|
|
<script type="text/ng-template" id="container.html">
|
|
<div class="container-element box box-blue">
|
|
<h3>Container {{item.id}}</h3>
|
|
<div class="column" ng-repeat="list in item.columns" ng-include="'list.html'"></div>
|
|
<div class="clearfix"></div>
|
|
</div>
|
|
</script>
|
|
|
|
<!-- Template for a normal list item -->
|
|
<script type="text/ng-template" id="item.html">
|
|
<div class="item">Item {{item.id}}</div>
|
|
</script>
|
|
|
|
<!-- Main area with dropzones and source code -->
|
|
<div class="col-md-10">
|
|
<div class="row">
|
|
<div ng-repeat="(zone, list) in models.dropzones" class="col-md-6">
|
|
<div class="dropzone box box-yellow">
|
|
<!-- The dropzone also uses the list template -->
|
|
<h3>Dropzone {{zone}}</h3>
|
|
<div ng-include="'list.html'"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div view-source="nested"></div>
|
|
|
|
<h2>Generated Model</h2>
|
|
<pre>{{modelAsJson}}</pre>
|
|
</div>
|
|
|
|
<!-- Sidebar -->
|
|
<div class="col-md-2">
|
|
|
|
<div class="toolbox box box-grey box-padding">
|
|
<h3>New Elements</h3>
|
|
<ul>
|
|
<!-- The toolbox only allows to copy objects, not move it. After a new
|
|
element was created, dnd-copied is invoked and we generate the next id -->
|
|
<li ng-repeat="item in models.templates"
|
|
dnd-draggable="item"
|
|
dnd-effect-allowed="copy"
|
|
dnd-copied="item.id = item.id + 1"
|
|
>
|
|
<button type="button" class="btn btn-default btn-lg" disabled="disabled">{{item.type}}</button>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div ng-if="models.selected" class="box box-grey box-padding">
|
|
<h3>Selected</h3>
|
|
<strong>Type: </strong> {{models.selected.type}}<br>
|
|
<input type="text" ng-model="models.selected.id" class="form-control" style="margin-top: 5px" />
|
|
</div>
|
|
|
|
<div class="trashcan box box-grey box-padding">
|
|
<!-- If you use [] as referenced list, the dropped elements will be lost -->
|
|
<h3>Trashcan</h3>
|
|
<ul dnd-list="[]">
|
|
<li><img src="nested/trashcan.jpg"></li>
|
|
</ul>
|
|
</div>
|
|
|
|
</div>
|