Skip to content

Commit a83fa3e

Browse files
giscafergiscafer
committed
dnd form support multi columns
1 parent ee99625 commit a83fa3e

4 files changed

Lines changed: 95 additions & 11 deletions

File tree

‎src/app/pages/dnd-form/dnd.component.html‎

Lines changed: 26 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -9,13 +9,35 @@ <h2 class="tagline full-featured">
99
<strong>Full-featured</strong> Form Editing</h2>
1010
</div>
1111
<section id="main_content" class="inner clearfix">
12+
<div class="pull-right" style="margin-bottom:10px;">
13+
<label class="label"> Gutter :</label>
14+
<nz-select [(ngModel)]="grid.colGutter" [nzPlaceHolder]="''" name="colGutter" [nzDisabled]="grid.colNum==1">
15+
<nz-option nzLabel="10px" [nzValue]="10"></nz-option>
16+
<nz-option nzLabel="20px" [nzValue]="20"></nz-option>
17+
<nz-option nzLabel="30px" [nzValue]="30"></nz-option>
18+
<nz-option nzLabel="40px" [nzValue]="40"></nz-option>
19+
</nz-select>
20+
</div>
21+
<div class="pull-right" style="margin-bottom:10px;">
22+
<label class="label"> Columns :</label>
23+
<nz-select [(ngModel)]="grid.colNum" [nzPlaceHolder]="''" name="colNum" (ngModelChange)="colNumChanged($event)">
24+
<nz-option *ngFor="let col of colNumList;let i=index;" [nzLabel]="col.label" [nzValue]="col.value"></nz-option>
25+
</nz-select>
26+
</div>
27+
<!-- form builder -->
1228
<div class="build-form">
1329
<div class="form-wrap form-builder">
14-
<div class="stage-wrap pull-right empty" data-content="Drag a field from the right to this area" id="drogbox">
15-
<ul class="frmb ui-sortable" style="min-height: 508px;" dnd-sortable-container [sortableData]="targetList" (onDropSuccess)="addTo($event)">
16-
<li dnd-sortable [sortableIndex]="i" *ngFor="let item of targetList; let i = index" class="list-group-item">{{item.label}}</li>
17-
</ul>
30+
<!-- dropping list -->
31+
<div class="stage-wrap pull-right box" [ngClass]="{'empty':grid.colNum==1}" data-content="Drag a field from the right to this area" id="drogbox">
32+
<div nz-row [nzGutter]="grid.colGutter">
33+
<ng-container *ngFor="let p of dropPanels;let pi=index">
34+
<ul nz-col [nzSpan]="[24/grid.colNum]" class="frmb ui-sortable" style="min-height: 508px;" dnd-sortable-container [sortableData]="p.targetList" (onDropSuccess)="addTo($event)">
35+
<li dnd-sortable [sortableIndex]="i" *ngFor="let item of p.targetList; let i = index" class="list-group-item">{{item.label}}</li>
36+
</ul>
37+
</ng-container>
38+
</div>
1839
</div>
40+
<!-- drag box -->
1941
<div class="cb-wrap pull-left" dnd-sortable-container [sortableData]="listCtrls" [dragCopy]="true" id="dragbox">
2042
<ul class="frmb-control ui-sortable">
2143
<li *ngFor="let item of listCtrls; let i = index" dnd-sortable [sortableIndex]="i" class="{{item.icon}} input-control ui-sortable-handle">

‎src/app/pages/dnd-form/dnd.component.scss‎

Lines changed: 23 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,9 @@
1414
background-position: 50% 50%;
1515
background-repeat: no-repeat;
1616
background-attachment: fixed, scroll;
17+
.label {
18+
color: #fff;
19+
}
1720
#main_content {
1821
padding: 0 0 30px;
1922
margin: 20px auto;
@@ -69,23 +72,37 @@
6972
vertical-align: top;
7073
position: relative;
7174
float: left;
72-
width: 74%;
75+
width: 80%;
76+
&.empty {
77+
&:after {
78+
content: attr(data-content);
79+
position: absolute;
80+
text-align: center;
81+
color: #fff;
82+
font-size: 16px;
83+
top: 50%;
84+
left: 0;
85+
width: 100%;
86+
margin-top: -1em;
87+
}
88+
}
7389
}
7490
.cb-wrap {
7591
vertical-align: top;
7692
float: right;
77-
width: 26%;
93+
padding-right: 10px;
94+
width: 20%;
7895
transition: transform .25s;
7996
}
80-
.empty .frmb {
81-
border: 3px dashed #ccc;
82-
margin-right: 5px;
97+
.box .frmb {
98+
border: 2px dashed #ccc;
99+
// margin-right: 5px;
83100
background-color: hsla(0, 0%, 100%, .25);
84101
}
85102
.frmb {
86103
list-style-type: none;
87104
min-height: 200px;
88-
margin: 0 6px 0 0;
105+
// margin: 0 6px 0 0;
89106
padding: 0;
90107
transition: background-color .5s ease-in-out;
91108
}

‎src/app/pages/dnd-form/dnd.component.ts‎

Lines changed: 31 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,53 @@
11
import { Component, OnInit } from '@angular/core';
2-
import { FRMB_CONTROL_LIST } from './frmb-controls';
2+
import { FRMB_CONTROL_LIST, Grid, ColNumList } from './frmb-controls';
33

44
@Component({
55
selector: 'app-dnd',
66
templateUrl: './dnd.component.html',
77
styleUrls: ['./dnd.component.scss']
88
})
99
export class DndComponent implements OnInit {
10+
11+
grid: Grid = {
12+
colNum: 1,
13+
colGutter: 10
14+
};
15+
16+
colNumList = ColNumList;
17+
18+
19+
dropPanels = [];
20+
1021
transferData: Object = { id: 1, label: 'Hello' };
22+
1123
listCtrls = FRMB_CONTROL_LIST;
1224
targetList: Array<string> = [];
25+
1326
constructor() { }
1427

1528
ngOnInit() {
29+
this.resetColumns();
1630
}
1731

1832

33+
resetColumns() {
34+
let count = this.grid.colNum;
35+
let arr = []
36+
while (--count >= 0) {
37+
arr.push({
38+
targetList: []
39+
});
40+
}
41+
this.dropPanels = arr;
42+
}
43+
1944
addTo($event: any) {
2045
// this.targetList.push($event.dragData);
2146
console.log($event)
2247
}
48+
49+
colNumChanged($event) {
50+
console.log($event);
51+
this.resetColumns();
52+
}
2353
}

‎src/app/pages/dnd-form/frmb-controls.ts‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -14,4 +14,19 @@ export const FRMB_CONTROL_LIST = [
1414
{ label: 'Select', icon: 'icon-select' },
1515
{ label: 'Text Field', icon: 'icon-text' },
1616
{ label: 'Text Area', icon: 'icon-textarea' },
17+
]
18+
19+
20+
21+
export interface Grid {
22+
colNum: number;
23+
colGutter?: number;
24+
}
25+
26+
export const ColNumList = [
27+
{ label: '1 column', value: 1 },
28+
{ label: '2 columns', value: 2 },
29+
{ label: '3 columns', value: 3 },
30+
{ label: '4 columns', value: 4 },
31+
{ label: '6 columns', value: 6 }
1732
]

0 commit comments

Comments
 (0)