角Ng2-dnd

Question

我想在Angular中获得任何建议和拖放帮助。

请在此处的屏幕截图中查看：

我们在右边有一个容器。我添加了字段之间的容器内排序。但不是，我在从左侧字段到容器的拖放问题。有什么建议吗？

<mat-list-item *ngFor="let inputList of schema; let i = index" [dragData]="inputList" dnd-draggable [dragEnabled]="true">
	<i *ngIf="inputList.preview" class="material-icons">{{inputList.preview}}</i>
	{{inputList.name}}
</mat-list-item>

我有示例dnd容器：

<div #dnd dnd-sortable-container [sortableData]="inputList" dnd-droppable class="my-drop-zone-form" (onDragLeave)="dragLeave($event)"
 (onDragOver)="dragOver($event)" (onDropSuccess)="transferDataSuccess($event)">
	<div class="text-uppercase panel-heading text-center m-1">Place to drop fields</div>
	<div class="panel-body">
		<div *ngFor="let input of inputList; let i = index">
			<div ngSwitch="{{input.type}}">
				<div *ngSwitchCase="'text'">
					<mat-form-field [sortableIndex]="i" dnd-sortable [id]='input.id' class="col-12">
						<label>{{input.label}}
							<i style=" position: absolute; top: -3px;" *ngIf="input.tooltip" matTooltip="{{input.tooltip}}" class="material-icons">
								info
							</i>
						</label>
						<input [name]="input.id" matInput [type]="input.type" [placeholder]="input.placeholder" [value]="input.value">
						<div class="component-btn-group">
							<i (click)="editComponent(input.id,i)" class="material-icons">edit</i>
							<i (click)="removeComponent(input, i)" class="material-icons">
								remove
							</i>
						</div>
					</mat-form-field>
				</div>

				<!--Input Type Checkbox-->
				<div [sortableIndex]="i" dnd-sortable class="mat-checkbox col-12" *ngSwitchCase="'checkbox'">
					<mat-checkbox>{{input.name}}</mat-checkbox>
					<hr>
					<div class="component-btn-group">
						<i (click)="editComponent(input.id,i)" class="material-icons">edit</i>
						<i (click)="removeComponent(input, i)" class="material-icons">
							remove
						</i>
					</div>
				</div>

				<!--Input Type Select-->
				<div [sortableIndex]="i" dnd-sortable class="mat-select col-12" *ngSwitchCase="'select'">
					<mat-form-field>
						<mat-select placeholder="{{input.name}}">
							<mat-option *ngFor="let select of input.value" [value]="select.displayValue">
								{{select.displayValue}}
							</mat-option>
							<i style=" position: absolute; top: -3px;" *ngIf="input.tooltip" matTooltip="{{input.tooltip}}" class="material-icons">
								info
							</i>
						</mat-select>
					</mat-form-field>
					<div class="component-btn-group">
						<i (click)="editComponent(input.id,i)" class="material-icons">edit</i>
						<i (click)="removeComponent(input, i)" class="material-icons">
							remove
						</i>
					</div>
				</div>

				<!--Number-->
				<div [sortableIndex]="i" dnd-sortable *ngSwitchCase="'number'">
					<mat-form-field class="col-12">
						<label>{{input.label}}
							<i style="position: absolute; top: -3px;" *ngIf="input.tooltip" matTooltip="{{input.tooltip}}" class="material-icons">
								info
							</i></label>
						<input matInput type="{{input.type}}" placeholder="{{input.placeholder}}" value="{{input.value}}">
						<i *ngIf="input.tooltip" matTooltip="{{input.tooltip}}" class="material-icons">
							info
						</i>
						<div class="component-btn-group">
							<i (click)="editComponent(input.id,i)" class="material-icons">edit</i>
							<i (click)="removeComponent(input, i)" class="material-icons">
								remove
							</i>
						</div>
					</mat-form-field>
				</div>

				<!--Password-->
				<div [sortableIndex]="i" dnd-sortable *ngSwitchCase="'password'">
					<mat-form-field class="col-12">
						<label>{{input.label}}
							<i style=" position: absolute; top: -3px;" *ngIf="input.tooltip" matTooltip="{{input.tooltip}}" class="material-icons">
								info
							</i></label>
						<input matInput type="{{input.type}}" value="{{input.value}}">
						<i *ngIf="input.tooltip" matTooltip="{{input.tooltip}}" class="material-icons">
							info
						</i>
						<div class="component-btn-group">
							<i (click)="editComponent(input.id,i)" class="material-icons">edit</i>
							<i (click)="removeComponent(input, i)" class="material-icons">
								remove
							</i>
						</div>
					</mat-form-field>
				</div>

				<!--TextArea-->
				<div [sortableIndex]="i" dnd-sortable class="col-12" *ngSwitchCase="'textarea'">
					<label>{{input.label}}
						<i style="position: absolute; top: -3px;" *ngIf="input.tooltip" matTooltip="{{input.tooltip}}" class="material-icons">
							info
						</i></label>
					<mat-form-field class="col-12">
						<textarea matInput placeholder="{{input.placeholder}}"></textarea>
						<div class="component-btn-group">
							<i (click)="editComponent(input.id,i)" class="material-icons">edit</i>
							<i (click)="removeComponent(input, i)" class="material-icons">
								remove
							</i>
						</div>
					</mat-form-field>
				</div>
			</div>
		</div>
	</div>
	<!--<div *ngIf="simpleDrop">Item was dropped here</div>-->
</div>