Descripción general de las directivas de arrastrar y soltar Angular

    Las directivas de arrastrar y soltar Ignite UI for Angular permiten arrastrar elementos por la página. Las funciones compatibles incluyen arrastre libre, uso de un controlador de arrastre, arrastrar fantasma, animaciones y múltiples estrategias de soltación.

    Angular Drag and Drop Example

    Arrastre y suelte el ícono para reposicionarlo.

    Getting Started with Ignite UI for Angular Drag and Drop

    Para comenzar con las directivas de arrastrar y soltar Ignite UI for Angular, primero debe instalar Ignite UI for Angular. En una aplicación Angular existente, escriba el siguiente comando:

    ng add igniteui-angular

    Para obtener una introducción completa al Ignite UI for Angular, lea el tema de introducción.

    El siguiente paso es importarlosIgxDragDropModule en tu archivo app.module.ts.

    // app.module.ts

...
import { IgxDragDropModule } from 'igniteui-angular';
// import { IgxDragDropModule } from '@infragistics/igniteui-angular'; for licensed package

@NgModule({
    ...
    imports: [..., IgxDragDropModule],
    ...
})
export class AppModule {}

    Alternativamente,16.0.0 puedes importar losIgxDragDirective yIgxDropDirective como dependencias independientes, o usar elIGX_DRAG_DROP_DIRECTIVES token para importar el componente y todos sus componentes y directivas de soporte.

    // home.component.ts

import { IGX_DRAG_DROP_DIRECTIVES } from 'igniteui-angular';
// import { IGX_DRAG_DROP_DIRECTIVES } from '@infragistics/igniteui-angular'; for licensed package

@Component({
    selector: 'app-home',
    template: `
    <div igxDrag>Drag me</div>
    <div igxDrop>Drop here</div>
    `,
    styleUrls: ['home.component.scss'],
    standalone: true,
    imports: [IGX_DRAG_DROP_DIRECTIVES]
    /* or imports: [IgxDragDirective, IgxDropDirective] */
})
export class HomeComponent {}

    Ahora que tienes importado el módulo o las directivas Ignite UI for Angular Drag and Drop, puedes empezar a usar lasigxDrag directivas andigxDrop.

    Using the Angular Drag Directive

    Cuando un elemento dentro de tu Angular aplicación necesita ser arrastrado de un lugar a otro en la página, laigxDrag directiva está diseñada para ayudar a lograr este comportamiento. En combinación con laigxDrop directiva, también se puede colocar el elemento arrastrado, para que puedas tener una aplicación totalmente interactiva.

    Dragging Fundamentals

    Una operación de arrastre comienza cuando el usuario final desliza al menos 5 px en cualquier dirección. Esto es personalizable y puede cambiarse usando ladragTolerance entrada. De lo contrario, la interacción se considera un clic y se activa undragClick evento.

    Cuando comienza el arrastre, se activa eldragStart evento. Para evitar que ocurra cualquier movimiento real, el evento puede cancelarse configurando lacancel propiedad en .true​

    Antes de que se realice cualquier movimiento real, también se activa eldragMove evento, que contiene la última y siguiente posición del puntero. Se activa cada vez que se detecta un movimiento mientras se arrastra un elemento.

    Después de que el usuario suelta el ratón/tacto, el elemento fantasma de arrastre se elimina del DOM y se emitirá eldragEnd evento.

    Note

    Debido a la naturaleza deldragMove evento, puede activarse muchas veces en un corto periodo de tiempo, lo que puede causar problemas de rendimiento en operaciones complejas realizadas cuando se activa.

    Dragging With Ghost

    LaigxDrag directiva puede aplicarse a cualquier elemento DOM simplemente añadiéndolo a su plantilla.

    <div igxDrag>Drag me</div>

    El comportamiento por defecto de laigxDrag directiva es dejar el elemento base sin modificar y crear un elemento fantasma cuando el usuario final realiza una operación de arrastre.

    Antes de que el fantasma se muestre en la página, se activa unghostCreate evento que contiene información sobre el elemento fantasma que está a punto de añadirse. El evento se activa justo después deldragStart evento. Si sedragStart cancela, no se creará ningún fantasma y elghostCreate evento no se activará en consecuencia.

    Justo antes de que el fantasma esté a punto de ser eliminado, se activará elghostDestroy evento.

    Customizing The Ghost

    El elemento fantasma, por defecto, es una copia del elemento base en el queigxDrag se usa. Se puede personalizar proporcionando una referencia plantilla directamente a laghostTemplate entrada.

    <div class="email-content flexlist"
 igxDrag
 [ghostTemplate]="customGhost">
 <div class="sender">
  {{email.sender}} 
 </div>
 <div class="email-title">
  {{email.title}}
 </div>
</div>
<ng-template #customGhost>
 <div class="dragGhost">
  <igx-icon fontSet="material">email</igx-icon> 
  Moving {{ draggedElements }} item{{ (draggedElements > 1 ? 's' : '')}}
 </div>
</ng-template>

    Dragging Without Ghost

    Si quieres mover el elemento base al que se aplica laigxDrag directiva, puedes hacerlo configurando laghost entrada enfalse. Así no habrá elemento fantasma extra renderizado y, si necesitas aplicar un estilo personalizado al arrastrar un elemento, puedes aplicarlo directamente al elemento base.

    <div igxDrag [ghost]="false">Drag me</div>

    Dragging Using a Handle

    Puedes especificar un elemento que sea hijo de laigxDrag para arrastrar, ya que por defecto se usa todo el elemento para realizar esa acción. Se puede hacer usando laigxDragHandle directiva y aplicarse a múltiples elementos dentro de laigxDrag.

    <div
    igxDrag 
    [ghost]="false"
    [dragTolerance]="0"
    (dragMove)=onDragMove($event)>
    <igx-icon igxDragHandle fontSet="material" class="dialogHandle">drag_indicator</igx-icon>
    <div class="igx-dialog__window">
    </div>
</div>

    Arrastre el cuadro de diálogo usando el controlador en la siguiente demostración.

    animaciones

    Cuando se arrastra un elemento, no se aplican animaciones de forma predeterminada.

    Puedes aplicar animación de transición enigxDrag cualquier momento, pero se recomienda usarla al arrastrar los extremos o el elemento no está arrastrado en ese momento. Esto se puede lograr utilizando lostransitionToOrigin​transitionTo métodos y .

    EltransitionToOrigin método, como su nombre indica, anima el elemento que se arrastra actualmente o su fantasma hasta la posición inicial, donde comenzó el arrastre. EltransitionTo método anima el elemento a una ubicación específica respecto a la página (es decirpageX, ypageY) o a la posición de un elemento especificado. Si el elemento no se arrastra en ese momento, animará de todos modos o creará fantasma y lo animará a la posición deseada.

    Ambas funciones tienen argumentos que puede configurar para personalizar la animación de transición y establecer la duración, la función de sincronización o el retraso. Si se establece una ubicación de inicio específica, animará el elemento a partir de allí.

    Cuando termina la animación de transición, si se crea un fantasma, se eliminará y laigxDrag directiva volverá a su estado inicial. Si no se crea ningún fantasma, mantendrá su posición. En ambos casos, eltransitioned evento se activará, dependiendo de cuánto dure la animación. Si no se aplica ninguna animación, se activará al instante.

    Puedes tener otros tipos de animaciones que impliquen transformaciones de elementos. Eso se puede hacer como cualquier otro elemento, ya sea usando las animaciones Angular o animaciones CSS directas al elemento baseigxDrag o a su fantasma. Si quieres aplicarlos al fantasma, tendrías que definir un fantasma personalizado y aplicar animaciones a su elemento.

    Reordene los elementos de la lista usando el controlador de arrastre. Mientras arrastra un elemento de la lista, otros elementos de la lista se reordenarán con animación.

    Ignoring draggable elements

    Si el usuario quiere tener hijos interactuables del elemento principal que tengan igxDrag instanciado, puede establecer laigxDragIgnore directiva para que el igxDrag los ignore y no realice ninguna acción de arrastre. Esto hará que estos elementos sean totalmente interactuables y reciban todos los eventos del ratón.

    <div [igxDrag]="myData">
    <span>Drag me!</span>
    <igx-icon igxDragIgnore fontSet="material" (click)="remove()">bin</igx-icon>
</div>

    Using the Angular Drop Directive

    Cuando un elemento que se arrastra usando laigxDrag directiva necesita colocarse en un área, seigxDrop puede usar para lograr este comportamiento. Proporciona eventos que puedes usar para determinar si un elemento entra en los límites del elemento al que se aplica y si se está liberando dentro de él.

    LaigxDrop directiva puede aplicarse a cualquier elemento del DOM igual que laigxDrag directiva.

    Por defecto, laigxDrop directiva no aplica ninguna lógica para modificar la posición del elemento arrastrado en el DOM. Por eso necesitas especificar odropStrategy aplicar lógica personalizada. Las estrategias de drop se discuten en la siguiente sección.

    Drop Strategies

    VieneigxDrop con 4 estrategias de drop que son:Default,Prepend,yInsert​Append:

    • Default- no realiza ninguna acción cuando un elemento se suelta sobre otroigxDrop elemento y se implementa como una clase nombradaIgxDefaultDropStrategy.

    • Append- siempre inserta el elemento eliminado como último hijo y se implementa como una clase nombradaIgxAppendDropStrategy.

    • Prepend- siempre inserta el elemento eliminado como primer hijo y se implementa como una clase con nombreIgxPrependDropStrategy.

    • Insert- inserta el elemento arrastrado en la última posición. Sin embargo, si hay un hijo bajo el elemento cuando se dejó caer, eligxDrag elemento instanciado se insertará en la posición de ese hijo y los otros hijos se desplazarán. Se implementa como una clase nombradaIgxInsertDropStrategy.

    La forma en que se puede aplicar una estrategia es estableciendo ladropStrategy entrada en una de las clases mencionadas anteriormente. El valor proporcionado debe ser un tipo y no una instancia, ya que esigxDrop necesario crear y gestionar la instancia en sí.

    public appendStrategy = IgxAppendDropStrategy;

    <div igxDrop [dropStrategy]="appendStrategy"></div>

    Cancelar una estrategia de caída

    Al usar una estrategia de drop específica, su comportamiento puede cancelarse en losdropped eventos estableciendo lacancel propiedad como verdadera. Eldropped evento es específico de laigxDrop. Si no tienes la estrategia de drop aplicada a laigxDrop cancelación, el evento no tendría efectos secundarios.

    Example:

    <div igxDrag></div>
<!-- ... -->
<div igxDrop (dropped)="onDropped($event)"></div>

    public onDropped(event) {
    event.cancel = true;
}

    Si quieres implementar tu propia lógica de drop, te recomendamos vincularte aldropped evento y ejecutar tu lógica allí o extender laIgxDefaultDropStrategy clase.

    Linking Drag to Drop Element

    Usando ladragChannel entrada ydropChannel en y respectivamenteigxDrag yigxDrop directivas, puedes enlazar diferentes elementos para que interactúen solo entre sí. Por ejemplo, si unigxDrag elemento necesita ser restringido para que pueda ser descartado en un elemento específicoigxDrop y no en todos disponibles, esto se puede lograr fácilmente asignándoles el mismo canal.

    <div igxDrag [dragChannel]="['Mammals', 'Land']"> Human </div>
<div igxDrag [dragChannel]="['Mammals', 'Water']"> Dolphin </div>
<div igxDrag [dragChannel]="['Insects', 'Air']"> Butterfly </div>
<div igxDrag [dragChannel]="['Insects', 'Land']"> Ant </div>

<div igxDrop [dropChannel]="['Mammals']"> Mammals </div>
<div igxDrop [dropChannel]="['Insects']"> Insects </div>
<div igxDrop [dropChannel]="['Land']"> Land </div>

    Arrastre los correos electrónicos de la derecha a las carpetas de la izquierda.

    Advanced Configuration

    Dado que ambosigxDrag yigxDrop combinados pueden usarse en muchos escenarios de aplicación diferentes y complejos, el siguiente ejemplo demuestra cómo pueden emplearse en un tablero Kanban.

    El usuario podría reordenar las tarjetas en cada columna. Esto se hace estableciendo también un área de colocación para cada tarjeta, de modo que podamos detectar cuándo otra tarjeta ha ingresado a su área y cambiarlas en tiempo de ejecución, para brindar una mejor experiencia de usuario.

    No será un tablero Kanban sin la posibilidad de cambiar tarjetas entre columnas. Una tarjeta se puede mover directamente de una columna a otra en una posición específica. Esto se logra aquí con un objeto ficticio, por lo que crearía un área visual donde se colocará la tarjeta si se suelta. El objeto ficticio se elimina una vez que finaliza el arrastre de una tarjeta o sale de otra columna.

    Arrastre elementos por el tablero kanban.

    API

    References

    Nuestra comunidad es activa y siempre da la bienvenida a nuevas ideas.