如何使用角度5拖放文本框？

Question

我需要使用angular 5 .please开发简单的拖放组件来实现最简单的方法吗？

Answer 1

您可以按照以下示例进行拖放操作：

在HTML中：

<app-spinner *ngIf="muestraSpinner"></app-spinner>

<div class="contenedor-principal container">

  <ng-template mat-tab-label>Formulario</ng-template>
  <div class="contenedor-principal container" style="padding-top: 20px;padding-bottom: 20px;">
    <div class="row">
      <div class="col-4 col-sm-4 col-md-4 col-lx-4">
        <div class="card">
          <div class="card-header">Componentes</div>
          <div class="card-block form-horizontal container">
            <blockquote class="card-blockquote" id="textboxData" style="padding-top: 15px;" dnd-draggable [dragEnabled]="true"  [dragData]="textboxData">
              <div class="form-group row">
                <label class="col-sm-4 col-form-label">Text input</label>
                <div class="col-sm-8">
                  <input class="form-control" disabled placeholder="placeholder" type="text" />
                  <small class="form-text text-muted">description</small>
                </div>
              </div>
            </blockquote>


          </div>
        </div>
      </div>
      <div class="col-8 col-sm-8 col-md-8 col-lx-8">
        <div class="card" (mouseout)="muestraBotones(-1)">

          <div class="card-header">Drop Here</div>
          <div class="card-block" dnd-droppable (onDropSuccess)="transferenciaDeObjetoHTML($event.dragData)">
              <div [ngSwitch]="true" *ngFor="let registro of configuracionesCampoHtml">

                <div class="form-group row text-center" *ngSwitchCase="registro.type === 'title'" (mouseover)="muestraBotones(registro.orden)">
                  <h5 class="col-sm-11 col-md-11 col-lg-11 col-form-label">{{registro.etiLeyendaPrincipal}}</h5>
                  <div class="col-sm-1 col-md-1 col-lg-1" [hidden]="registro.orden != registroBotones">
                    <div class="col-sm-1 col-md-1 col-lg-1 pull-right contenedor-botones">

                    </div>
                  </div>
                </div>
                <div class="form-group container" *ngSwitchCase="registro.type !== 'title'" (mouseover)="muestraBotones(registro.orden)">
                  <div class="form-group row">
                    <label [attr.for]="registro.datNombreObjHtml" class="col-3 col-form-label">{{registro.etiLeyendaPrincipal}}</label>
                    <div class="row col-8">
                      <div *ngFor="let control of registro.datIngresos" [ngSwitch]="control.tobTipoControl" [ngClass]="{
                        'col-3': registro.datIngresos.length >= 4 || registro.datIngresos.length <= 12, 
                        'col-4': registro.datIngresos.length === 3,
                        'col-6': registro.datIngresos.length === 2, 
                        'col-12': registro.datIngresos.length === 1 }">
                        <div *ngSwitchCase="'input'">
                          <input class="form-control" [type]="control.datTipoDato" [attr.name]="control.datNombreObjHtml"


                            [attr.id]="control.datNombreObjHtml"  ngModel>
                        </div>                        

                      </div>
                    </div>                        
                  </div>
                </div>
              </div>                
          </div>
        </div>
      </div>
    </div>
  </div>    
</div>

在typescriprt中：

import { Component, OnInit, ViewChild } from '@angular/core';
import { Subscription } from 'rxjs/Subscription';
import { MessageService } from '../../../service/message.service';

@Component({
  selector: 'app-reporte-evento-cliente',
  templateUrl: './reporte-evento-cliente.component.html',
  styleUrls: ['./reporte-evento-cliente.component.css'],
  providers: []
})  


export class ReporteEventoClienteComponent implements OnInit {    
  FieldObject: Object[];    
  DYNAMIC_FORM_COMPONENTS: Object[] = [
    {
      etiLeyendaPrincipal: 'Header',
      etiNombreObjetoHtml: 'etiTitle',
      datIngresos: [{
        tobTipoControl: 'label',
        datNombreObjHtml: 'etiTitle',
        datTipoDato: null

      }],
      type: 'title',
      disabled: false,
      value: null
    },

    {
      etiLeyendaPrincipal: 'Nombre:',
      etiNombreObjetoHtml: 'etiInput',    
      datIngresos: [{

        tobTipoControl: 'input',
        datNombreObjHtml: 'txtTipo',
        datTipoDato: 'text'

      }],
      type: 'input',
      disabled: false,
      value: null,
    }
  ];
  subscription: Subscription;      
  configuracionesCampoHtml = [];    
  modificaCampoHtml: any;
  contadorConfiguracionCampoHtml = -1;
  get controls() { return this.configuracionesCampoHtml.filter(({ type }) => type !== 'button'); }
  defaultComponents: Object[] = this.DYNAMIC_FORM_COMPONENTS;
  textboxData = this.defaultComponents[1];
  existeFormulario = false;    
  registroBotones = -1;    
  constructor(
    private messageService: MessageService) {
    this.subscription = this.messageService.getModalToDynamicForm()
      .subscribe(modificaCampoHtml => {

        if (this.existeFormulario) {
          this.configuracionesCampoHtml[this.configuracionesCampoHtml
            .findIndex(res => res.etiCodigo === modificaCampoHtml.data.etiCodigo)] = modificaCampoHtml.data;
        } else {
          this.configuracionesCampoHtml[this.configuracionesCampoHtml
            .findIndex(res => res.orden === modificaCampoHtml.data.orden)] = modificaCampoHtml.data;
        }    
      });
  }

  ngOnInit() {
    this.transferenciaDeObjetoHTML(this.defaultComponents[0]);       
  }



  muestraBotones(registro: number) {
    this.registroBotones = registro;
  }

  transferenciaDeObjetoHTML($event: any) {
    let nuevoControl: any = {};
    nuevoControl = $event;
    this.contadorConfiguracionCampoHtml++;
    nuevoControl.orden = this.contadorConfiguracionCampoHtml;
    nuevoControl.datNombreObjHtml = `${nuevoControl['datIngresos'][0].datNombreObjHtml}${this.contadorConfiguracionCampoHtml}`;
    this.configuracionesCampoHtml.push(nuevoControl);    
  }
}

它将如下所示：您可以从左侧拖动，然后可以向右拖动。