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

    La Ignite UI for Angular Drag and Drop permite arrastrar elementos por la página. Las funciones admitidas incluyen arrastre libre, uso de un controlador de arrastre, fantasma de arrastre, animaciones y múltiples estrategias de colocació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 a la Ignite UI for Angular, lea el tema de introducción.

    El siguiente paso es importar IgxDragDropModule en su 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, a partir de 16.0.0, puede importar IgxDragDirective e IgxDropDirective como dependencias independientes, o usar el token IGX_DRAG_DROP_DIRECTIVES 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 tiene importadas las directivas o el módulo Ignite UI for Angular Drag and Drop, puede comenzar a usar las directivas igxDrag e igxDrop.

    Using the Angular Drag Directive

    Cuando es necesario arrastrar un elemento dentro de su aplicación Angular de un lugar a otro en la página, la directiva igxDrag está diseñada para ayudar a lograr este comportamiento. En combinación con la directiva igxDrop, también se puede realizar la colocación del elemento arrastrado, para que pueda tener una aplicación totalmente interactiva.

    Dragging Fundamentals

    Una operación de arrastre comienza cuando el usuario final desliza al menos 5 píxeles en cualquier dirección. Esto es personalizable y se puede cambiar usando la entrada dragTolerance. De lo contrario, la interacción se considera un clic y se activa un evento dragClick.

    Cuando comienza el arrastre, se activa el evento dragStart. Para evitar que se produzca cualquier movimiento real, el evento se puede cancelar estableciendo la propiedad cancel en true.

    Antes de realizar cualquier movimiento real, también se activa el evento dragMove, que contiene la última y siguiente posición del puntero. Se activa cada vez que se detecta un movimiento al arrastrar un elemento.

    Después de que el usuario suelta el mouse o toca, el elemento fantasma de arrastre se elimina del DOM y se emitirá el evento dragEnd.

    Note

    Debido a la naturaleza del evento dragMove, se puede activar muchas veces en un corto período de tiempo, lo que puede causar problemas de rendimiento para operaciones complejas realizadas cuando se activa.

    Dragging With Ghost

    La directiva igxDrag se puede aplicar a cualquier elemento DOM simplemente agregándolo a su plantilla.

    <div igxDrag>Drag me</div>

    El comportamiento predeterminado de la directiva igxDrag es dejar el elemento base sin modificar y crear un elemento fantasma cuando el usuario final realiza la operación de arrastre.

    Antes de que el fantasma se represente en la página, se activa un evento ghostCreate que contiene información del elemento fantasma que está a punto de agregarse. El evento se activa justo después del evento dragStart. Si se cancela dragStart, no se creará ningún fantasma y el evento ghostCreate no se activará en consecuencia.

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

    Customizing The Ghost

    El elemento fantasma por defecto es una copia del elemento base en el que se utiliza igxDrag. Se puede personalizar proporcionando una referencia de plantilla a la entrada ghostTemplate directamente.

    <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 desea mover el elemento base al que se aplica la directiva igxDrag, puede hacerlo configurando la entrada ghost en false. De esa manera, no se representará ningún elemento fantasma adicional y, si necesita aplicar un estilo personalizado al arrastrar un elemento, puede aplicarlo directamente al elemento base.

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

    Dragging Using a Handle

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

    <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.

    Puede aplicar animación de transición a igxDrag en cualquier momento, pero se recomienda usarla cuando finaliza el arrastre o cuando el elemento no está arrastrado actualmente. Esto se puede lograr utilizando los métodos transitionToOrigin y transitionTo.

    El método transitionToOrigin, como su nombre indica, anima el elemento actualmente arrastrado o su fantasma a la posición inicial, donde comenzó el arrastre. El método transitionTo anima el elemento a una ubicación específica relativa a la página (es decir, pageX y pageY) o a la posición de un elemento específico. Si el elemento no se está arrastrando actualmente, se animará de todos modos o creará un 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 finalice la animación de transición, si se crea un fantasma, se eliminará y la directiva igxDrag volverá a su estado inicial. Si no se crea ningún fantasma, mantendrá su posición. En ambos casos, se activará el evento transitioned, dependiendo de cuánto dure la animación. Si no se aplica ninguna animación, se activará instantáneamente.

    Puedes tener otros tipos de animaciones que impliquen transformaciones de elementos. Esto se puede hacer como cualquier otro elemento, ya sea usando animaciones Angular o animaciones CSS directas en el elemento igxDrag base o en su fantasma. Si desea aplicarlos al fantasma, deberá 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 desea tener hijos interactuables del elemento principal que tiene una instancia de igxDrag, puede configurar la directiva igxDragIgnore para que igxDrag los ignore y no realice ninguna acción de arrastre. Esto permitirá que estos elementos sean completamente interactivos y reciban todos los eventos del mouse.

    <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 está arrastrando usando la directiva igxDrag necesita colocarse en un área, se puede usar igxDrop para lograr este comportamiento. Proporciona eventos que puede utilizar para determinar si un elemento ingresa a los límites del elemento al que se aplica y si se libera dentro de él.

    La directiva igxDrop se puede aplicar a cualquier elemento DOM al igual que la directiva igxDrag.

    De forma predeterminada, la directiva igxDrop no aplica ninguna lógica para modificar la posición del elemento arrastrado en el DOM. Es por eso que necesitas especificar una dropStrategy o aplicar una lógica personalizada. Las estrategias de caída se analizan en la siguiente sección.

    Drop Strategies

    El igxDrop viene con 4 estrategias de colocación que son: Default, Prepend, Insert y Append:

    • Default: no realiza ninguna acción cuando un elemento se coloca en un elemento igxDrop y se implementa como una clase denominada IgxDefaultDropStrategy.

    • Append: siempre inserta el elemento eliminado como último elemento secundario y se implementa como una clase denominada IgxAppendDropStrategy.

    • Prepend: siempre inserta el elemento eliminado como el primer elemento secundario y se implementa como una clase denominada IgxPrependDropStrategy.

    • Insert: inserta el elemento arrastrado en la última posición. Sin embargo, si hay un elemento secundario debajo del elemento cuando se soltó, el elemento instanciado igxDrag se insertará en la posición de ese elemento secundario y los otros elementos secundarios se desplazarán. Se implementa como una clase denominada IgxInsertDropStrategy.

    La forma en que se puede aplicar una estrategia es configurando la entrada dropStrategy en una de las clases enumeradas anteriormente. El valor proporcionado tiene que ser un tipo y no una instancia, ya que igxDrop necesita crear y administrar la instancia en sí.

    public appendStrategy = IgxAppendDropStrategy;

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

    Cancelar una estrategia de caída

    Cuando se utiliza una estrategia de eliminación específica, su comportamiento se puede cancelar en los eventos dropped estableciendo la propiedad cancel en verdadero. El evento dropped es específico de igxDrop. Si no tiene una estrategia de caída aplicada a igxDrop, cancelar el evento no tendría efectos secundarios.

    Example:

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

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

    Si desea implementar su propia lógica de eliminación, le recomendamos vincularse al evento dropped y ejecutar su lógica allí o extender la clase IgxDefaultDropStrategy.

    Linking Drag to Drop Element

    Usando la entrada dragChannel y dropChannel en las directivas igxDrag e igxDrop respectivamente, puede vincular diferentes elementos para interactuar solo entre sí. Por ejemplo, si es necesario restringir un elemento igxDrag para que pueda colocarse en un elemento igxDrop específico y no todos estén 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 tanto igxDrag como igxDrop combinados se pueden usar en muchos escenarios de aplicaciones diferentes y complejos, el siguiente ejemplo demuestra cómo se pueden usar 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.