Visão geral das diretivas de arrastar e soltar Angular

    As diretivas Ignite UI for Angular Drag and Drop permitem arrastar elementos pela página. Os recursos suportados incluem arrastar livre, usar uma alça de arrasto, arrastar fantasma, animações e várias estratégias de soltar.

    Angular Drag and Drop Example

    Arraste e solte o ícone para reposicioná-lo.

    Getting Started with Ignite UI for Angular Drag and Drop

    Para começar a usar as diretivas Drag and Drop Ignite UI for Angular, primeiro você precisa instalar Ignite UI for Angular. Em um aplicativo Angular existente, digite o seguinte comando:

    ng add igniteui-angular

    Para obter uma introdução completa ao Ignite UI for Angular, leia o tópico de introdução.

    O próximo passo é importar o IgxDragDropModule no seu arquivo 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 {}

    Como alternativa, a partir da 16.0.0, você pode importar IgxDragDirective e IgxDropDirective como dependências autônomas ou usar o token IGX_DRAG_DROP_DIRECTIVES para importar o componente e todos os seus componentes e diretivas de suporte.

    // 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 {}

    Agora que você importou o módulo ou as diretivas Ignite UI for Angular Drag and Drop, você pode começar a usar as diretivas igxDrag e igxDrop.

    Using the Angular Drag Directive

    Quando um elemento dentro do seu aplicativo Angular precisa ser arrastado de um lugar para outro na página, a diretiva igxDrag é projetada para ajudar a atingir esse comportamento. Em combinação com a diretiva igxDrop, a colocação do elemento arrastado também pode ser feita, para que você possa ter um aplicativo totalmente interativo.

    Dragging Fundamentals

    Uma operação de arrastar começa quando o usuário final desliza pelo menos 5px em qualquer direção. Isso é personalizável e pode ser alterado usando a entrada dragTolerance. Caso contrário, a interação é considerada um clique e um evento dragClick é acionado.

    Quando o arrasto começa, o evento dragStart é disparado. Para evitar que qualquer movimento real ocorra, o evento pode ser cancelado definindo a propriedade cancel como true.

    Antes de qualquer movimento real ser executado, o evento dragMove também é disparado, contendo a última e a próxima posição do ponteiro. Ele é disparado toda vez que um movimento é detectado ao arrastar um elemento.

    Após o usuário soltar o mouse/toque, o elemento fantasma de arrastar é removido do DOM e o evento dragEnd será emitido.

    Note

    Devido à natureza do evento dragMove, ele pode ser acionado muitas vezes em um curto período de tempo, o que pode causar problemas de desempenho para operações complexas realizadas quando acionado.

    Dragging With Ghost

    A diretiva igxDrag pode ser aplicada em qualquer elemento DOM, bastando apenas adicioná-la ao seu modelo.

    <div igxDrag>Drag me</div>

    O comportamento padrão da diretiva igxDrag é deixar o elemento base inalterado e criar um elemento fantasma quando a operação de arrastar é realizada pelo usuário final.

    Antes que o fantasma seja renderizado na página, um evento ghostCreate é disparado contendo informações do elemento fantasma que está prestes a ser adicionado. O evento é disparado logo após o evento dragStart. Se o dragStart for cancelado, nenhum fantasma será criado e o evento ghostCreate não será disparado de acordo.

    Logo antes do fantasma ser removido, o evento ghostDestroy será acionado.

    Customizing The Ghost

    O elemento fantasma por padrão é uma cópia do elemento base no qual o igxDrag é usado. Ele pode ser personalizado fornecendo uma referência de modelo diretamente para a entrada ghostTemplate.

    <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

    Se você quiser mover o elemento base, ao qual a diretiva igxDrag é aplicada, você pode fazer isso definindo a entrada ghost como false. Dessa forma, não haverá nenhum elemento fantasma extra renderizado e se você precisar aplicar um estilo personalizado ao arrastar um elemento, você pode aplicá-lo diretamente ao elemento base.

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

    Dragging Using a Handle

    Você pode especificar um elemento que seja filho do igxDrag pelo qual arrastar, já que por padrão o elemento inteiro é usado para executar essa ação. Isso pode ser feito usando a diretiva igxDragHandle e pode ser aplicado a múltiplos elementos dentro do 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>

    Arraste a caixa de diálogo usando a alça na demonstração a seguir.

    Animações

    Quando um elemento está sendo arrastado, nenhuma animação é aplicada por padrão.

    Você pode aplicar animação de transição ao igxDrag a qualquer momento, mas é aconselhável usá-lo quando o arrasto terminar ou o elemento não estiver arrastado no momento. Isso pode ser obtido usando os métodos transitionToOrigin e transitionTo.

    O método transitionToOrigin, como o nome sugere, anima o elemento atualmente arrastado ou seu fantasma para a posição inicial, onde o arrasto começou. O método transitionTo anima o elemento para um local específico em relação à página (ou seja, pageX e pageY) ou para a posição de um elemento especificado. Se o elemento não estiver sendo arrastado no momento, ele será animado de qualquer maneira ou criará um fantasma e o animará para a posição desejada.

    Ambas as funções têm argumentos que você pode definir para personalizar a animação de transição e definir duração, função de tempo ou atraso. Se um local de início específico for definido, ele animará o elemento a partir dali.

    Quando a animação de transição termina, se um fantasma for criado, ele será removido e a diretiva igxDrag retornará ao seu estado inicial. Se nenhum fantasma for criado, ele manterá sua posição. Em ambos os casos, o evento transitioned será acionado, dependendo de quanto tempo a animação durar. Se nenhuma animação for aplicada, ela será acionada instantaneamente.

    Você pode ter outros tipos de animações que envolvam transformações de elementos. Isso pode ser feito como qualquer outro elemento, seja usando Angular Animations ou CSS Animations direto para o elemento base igxDrag ou seu ghost. Se você quiser aplicá-los ao ghost, você precisaria definir um ghost personalizado e aplicar animações ao seu elemento.

    Reordene os itens na lista usando a alça de arrastar. Ao arrastar um item da lista, outros itens da lista serão reordenados com animação.

    Ignoring draggable elements

    Se o usuário quiser ter filhos interativos do elemento principal que tenham igxDrag instanciado, ele pode definir a diretiva igxDragIgnore para fazê-los ser ignorados pelo igxDrag e não executar nenhuma ação de arrastar. Isso deixará esses elementos totalmente interativos e receberá todos os eventos do mouse.

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

    Using the Angular Drop Directive

    Quando um elemento que está sendo arrastado usando a diretiva igxDrag precisa ser colocado em uma área, o igxDrop pode ser usado para atingir esse comportamento. Ele fornece eventos que você pode usar para determinar se um elemento está entrando nos limites do elemento ao qual é aplicado e se está sendo liberado dentro dele.

    A diretiva igxDrop pode ser aplicada a qualquer elemento DOM, assim como a diretiva igxDrag.

    Por padrão, a diretiva igxDrop não aplica nenhuma lógica para modificar a posição do elemento arrastado no DOM. É por isso que você precisa especificar uma dropStrategy ou aplicar uma lógica personalizada. Estratégias de drop são discutidas na próxima seção.

    Drop Strategies

    O igxDrop vem com 4 estratégias de drop que são: Default, Prepend, Insert e Append:

    • Default- não executa nenhuma ação quando um elemento é solto em um elemento igxDrop e é implementado como uma classe chamada IgxDefaultDropStrategy.

    • Append- sempre insere o elemento descartado como último filho e é implementado como uma classe chamada IgxAppendDropStrategy.

    • Prepend- sempre insere o elemento descartado como primeiro filho e é implementado como uma classe chamada IgxPrependDropStrategy.

    • Insert- insere o elemento arrastado na última posição. Se houver um filho sob o elemento quando ele foi solto, o elemento instanciado igxDrag será inserido na posição desse filho e os outros filhos serão deslocados. Ele é implementado como uma classe chamada IgxInsertDropStrategy.

    A maneira como uma estratégia pode ser aplicada é definindo a entrada dropStrategy para uma das classes listadas acima. O valor fornecido tem que ser um tipo e não uma instância, já que o igxDrop precisa criar e gerenciar a instância ele mesmo.

    public appendStrategy = IgxAppendDropStrategy;

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

    Cancelando uma estratégia de queda

    Ao usar uma estratégia de drop específica, seu comportamento pode ser cancelado nos eventos dropped definindo a propriedade cancel como true. O evento dropped é específico para o igxDrop. Se você não tiver uma estratégia de drop aplicada ao igxDrop, cancelar o evento não terá efeitos colaterais.

    Example:

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

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

    Se você quiser implementar sua própria lógica de descarte, recomendamos vincular ao evento dropped e executar sua lógica lá ou estender a classe IgxDefaultDropStrategy.

    Linking Drag to Drop Element

    Usando as entradas dragChannel e dropChannel nas diretivas igxDrag e igxDrop, respectivamente, você pode vincular diferentes elementos para interagir somente entre si. Por exemplo, se um elemento igxDrag precisa ser restringido para que possa ser solto em um elemento igxDrop específico e não em todos os disponíveis, isso pode ser facilmente alcançado atribuindo a eles o mesmo 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>

    Arraste os e-mails da direita para as pastas da esquerda.

    Advanced Configuration

    Como igxDrag e igxDrop combinados podem ser usados em muitos cenários de aplicação diferentes e complexos, o exemplo a seguir demonstra como eles podem ser usados em um quadro Kanban.

    O usuário pode reordenar os cards em cada coluna. Isso é feito definindo cada card também uma área de queda, para que possamos detectar quando outro card entrou em sua área e trocá-los em tempo de execução, para fornecer melhor experiência ao usuário.

    Não seria um quadro Kanban sem também a capacidade de alternar cartões entre colunas. Um cartão pode ser movido diretamente de uma coluna para outra em uma posição específica. Isso é obtido aqui com um objeto fictício, então criaria uma área visual onde o cartão seria posicionado se liberado. O objeto fictício é removido quando o arrasto de um cartão termina ou sai de outra coluna.

    Arraste itens pelo quadro kanban.

    API

    References

    Nossa comunidade é ativa e sempre acolhedora para novas ideias.