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 issoIgxDragDropModule no seu arquivo app.module.ts.

    // app.module.ts

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

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

    Alternativamente,16.0.0 você pode importar asIgxDragDirective dependências eIgxDropDirective como independentes, ou usar oIGX_DRAG_DROP_DIRECTIVES token para importar o componente e todos os seus componentes e diretivas de suporte.

    // home.component.ts

import { IGX_DRAG_DROP_DIRECTIVES } from 'igniteui-angular/directives';
// 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 diretivas Ignite UI for Angular Drag and Drop, pode começar a usar asigxDrag diretivas andigxDrop.

    Using the Angular Drag Directive

    Quando um elemento dentro da sua aplicação Angular precisa ser arrastado de um lugar para outro na página, aigxDrag diretriz é projetada para ajudar a alcançar esse comportamento. Em combinação com aigxDrop diretiva, a colocação do elemento arrastado também pode ser feita, para que você tenha uma aplicação totalmente interativa.

    Dragging Fundamentals

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

    Quando o arrastar começa, odragStart evento é acionado. Para evitar qualquer movimento real, o evento pode ser cancelado configurando acancel propriedade paratrue.

    Antes que qualquer movimento real esteja prestes a ser realizado, odragMove evento também é acionado, contendo a última e próxima posição do ponteiro. Ele é acionado toda vez que um movimento é detectado enquanto um elemento é arrastado.

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

    Note

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

    Dragging With Ghost

    AigxDrag diretiva pode ser aplicada a qualquer elemento do DOM apenas adicionando-o ao seu template.

    <div igxDrag>Drag me</div>

    O comportamento padrão daigxDrag diretiva é deixar o elemento base sem modificações 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, umghostCreate evento é acionado contendo informações sobre o elemento fantasma que está prestes a ser adicionado. O evento é acionado logo após odragStart evento. Se fordragStart cancelado, nenhum fantasma será criado e oghostCreate evento não será acionado de forma adequada.

    Logo antes do fantasma ser removido, oghostDestroy evento será acionado.

    Customizing The Ghost

    O elemento fantasma, por padrão, é uma cópia do elemento base em queigxDrag é usado. Ele pode ser personalizado fornecendo uma referência modelo diretamente para aghostTemplate 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

    Se você quiser mover o elemento base, ao qual aigxDrag diretiva é aplicada, pode fazer isso configurando aghost entrada parafalse. Assim, não haverá elemento fantasma extra renderizado e, se você precisar aplicar um estilo personalizado ao arrastar um elemento, pode aplicar diretamente no elemento base.

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

    Dragging Using a Handle

    Você pode especificar um elemento que seja filho de por oigxDrag qual arrastar, já que por padrão todo o elemento é usado para realizar essa ação. Pode ser feito usando aigxDragHandle diretiva e pode ser aplicado a múltiplos elementos dentro doigxDrag.

    <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 aigxDrag qualquer momento, mas é recomendado usá-la ao arrastar os finais ou ao o elemento não estiver arrastado no momento. Isso pode ser alcançado usando ostransitionToOrigin métodos etransitionTo.

    OtransitionToOrigin método, como o nome sugere, anima o elemento atualmente arrastado ou seu fantasma até a posição inicial, onde o arrasto começou. OtransitionTo método anima o elemento para uma localização específica em relação à página (ou sejapageX, e)pageY ou à posição de um elemento especificado. Se o elemento não estiver sendo arrastado no momento, ele vai animar mesmo assim ou criar fantasma e animá-lo 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 aigxDrag diretiva retornará ao seu estado inicial. Se nenhum fantasma for criado, ele manterá sua posição. Em ambos os casos, otransitioned evento será acionado, dependendo de quanto tempo a animação dura. Se nenhuma animação for aplicada, ela será acionada instantaneamente.

    Você pode ter outros tipos de animações que envolvem transformações de elementos. Isso pode ser feito como qualquer outro elemento, seja usando as animações Angular ou animações CSS diretas para o elemento baseigxDrag ou seu fantasma. Se quiser aplicá-las ao fantasma, precisaria definir um fantasma 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 aigxDragIgnore diretiva para que sejam ignorados pelo igxDrag e não realizem nenhuma ação de arrasto. Isso fará com que esses elementos sejam totalmente interativos e recebam 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 aigxDrag diretiva precisa ser colocado em uma área, podeigxDrop ser usado para alcançar 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.

    AigxDrop diretiva pode ser aplicada a qualquer elemento do DOM, assim como aigxDrag diretiva.

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

    Drop Strategies

    EleigxDrop vem com 4 estratégias de drop que são:Default​Prepend​Insert e:Append​

    • Default- não realiza nenhuma ação quando um elemento é deixado cair sobre umigxDrop elemento e é implementado como uma classe nomeadaIgxDefaultDropStrategy.

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

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

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

    A forma como uma estratégia pode ser aplicada é definindo adropStrategy entrada para uma das classes listadas acima. O valor fornecido deve ser um tipo e não uma instância, já que aigxDrop necessidade é criar e gerenciar a instância em si.

    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 nosdropped eventos ao definir acancel propriedade como verdadeira. Odropped evento é específico para oigxDrop. Se você não tiver a estratégia de drop aplicada aoigxDrop cancelamento, o evento não teria 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 drop, aconselhamos vincular aodropped evento e executar sua lógica lá ou estender aIgxDefaultDropStrategy classe.

    Linking Drag to Drop Element

    Usando adragChannel entrada edropChannel nas diretivas eigxDrag respectivamenteigxDrop, você pode vincular diferentes elementos para interagirem apenas entre si. Por exemplo, se umigxDrag elemento precisar ser restrito para que possa ser descartado em um elemento específicoigxDrop e não em todos disponíveis, isso pode ser facilmente alcançado atribuindo-lhes 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 ambosigxDrag eigxDrop 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 tabuleiro 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.