Angular 드래그 앤 드롭 지시문 개요

    Ignite UI for Angular 페이지 주변에서 요소를 드래그할 수 있도록 합니다. 지원되는 기능에는 자유 드래그, 드래그 핸들 사용, 드래그 고스트, 애니메이션 및 여러 드롭 전략이 포함됩니다.

    Angular Drag and Drop Example

    아이콘을 드래그 앤 드롭하여 위치를 변경하세요.

    Getting Started with Ignite UI for Angular Drag and Drop

    Ignite UI for Angular 드래그 앤 드롭 지시문을 시작하려면 먼저 Ignite UI for Angular 설치해야 합니다. 기존 Angular 애플리케이션에서 다음 명령을 입력합니다.

    ng add igniteui-angular

    Ignite UI for Angular에 대한 전체 소개는 시작 항목을 참조하십시오.

    다음 단계는 다음 단계를 가져오는 것입니다.IgxDragDropModule 당신의 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 {}

    또는16.0.0 현재로서는 와IgxDragDirective를 독립 실행형 의존성으로 가져오IgxDropDirective 거나, 토큰을IGX_DRAG_DROP_DIRECTIVES 사용해 컴포넌트와 그 지원 컴포넌트, 명령어를 가져올 수도 있습니다.

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

    Now that you have the Ignite UI for Angular Drag and Drop module or directives imported, you can start using the igxDrag and igxDrop directives.

    Using the Angular Drag Directive

    When an element inside your Angular application needs to be dragged from one place to another on the page, the igxDrag directive is designed to help achieve this behavior. In combination with the igxDrop directive, the placing of the dragged element can be done as well, so you can have fully interactive application.

    Dragging Fundamentals

    A drag operation starts when the end user swipes at least 5px in any direction. This is customizable and can be changed using the dragTolerance input. Otherwise the interaction is considered as a click and a dragClick event is triggered.

    When the dragging starts, the dragStart event is triggered. To prevent any actual movement to occur, the event can be canceled by setting the cancel property to true.

    Before any actual movement is about to be performed, the dragMove event is also triggered, containing the last and next position of the pointer. It is triggered every time a movement is detected while dragging an element around.

    After the user releases the mouse/touch the drag ghost element is removed from the DOM and the dragEnd event will be emitted.

    Note

    Due to the nature of the dragMove event, it can be triggered many times in a short period of time, which may cause performance issues for complex operations done when triggered.

    Dragging With Ghost

    The igxDrag directive can be applied on any DOM element by just adding it to its template.

    <div igxDrag>Drag me</div>

    The default behavior of igxDrag directive is to leave the base element unmodified and to create a ghost element when drag operation is performed by the end user.

    Before the ghost is rendered on the page, a ghostCreate event is triggered containing information of the ghost element that is about to be added. The event is triggered right after the dragStart event. If the dragStart is canceled, no ghost will be created and the ghostCreate event will not trigger accordingly.

    Right before the ghost is about to be removed, the ghostDestroy event will be triggered.

    Customizing The Ghost

    The ghost element by default is a copy of the base element the igxDrag is used on. It can be customized by providing a template reference to the ghostTemplate input directly.

    <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

    If you would like to move the base element, to which the igxDrag directive is applied, you can do that by setting the ghost input to false. That way there will be no extra ghost element rendered and if you need to apply custom styling when dragging and element, you can apply it directly to the base element.

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

    Dragging Using a Handle

    You can specify an element that is a child of the igxDrag by which to drag, since by default the whole element is used to perform that action. It can be done using the igxDragHandle directive and can be applied to multiple elements inside the 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>

    다음 데모에서 핸들을 사용하여 대화상자를 드래그하세요.

    애니메이션

    요소를 드래그할 때 기본적으로 애니메이션이 적용되지 않습니다.

    You can apply transition animation to the igxDrag at any time, but it is advised to use it when dragging ends or the element is not currently dragged. This can be achieved by using the transitionToOrigin and the transitionTo methods.

    The transitionToOrigin method, as the name suggests, animates the currently dragged element or its ghost to the start position, where the dragging began. The transitionTo method animates the element to a specific location relative to the page (i.e. pageX and pageY) or to the position of a specified element. If the element is not being currently dragged, it will animate anyway or create ghost and animate it to the desired position.

    두 함수 모두 전환 애니메이션을 사용자 정의하고 지속 시간, 타이밍 함수 또는 지연을 설정하기 위해 설정할 수 있는 인수를 가지고 있습니다. 특정 시작 위치가 설정되면 거기에서 시작하는 요소에 애니메이션이 적용됩니다.

    When the transition animation ends, if a ghost is created, it will be removed and the igxDrag directive will return to its initial state. If no ghost is created, it will keep its position. In both cases, then the transitioned event will be triggered, depending on how long the animation lasts. If no animation is applied, it will be triggered instantly.

    You can have other types of animations that involve element transformations. That can be done like any other element either using the Angular Animations or straight CSS Animations to either the base igxDrag element or its ghost. If you want to apply them to the ghost, you would need to define a custom ghost and apply animations to its element.

    드래그 핸들을 사용하여 목록의 항목을 재정렬합니다. 목록 항목을 드래그하는 동안 다른 목록 항목은 애니메이션으로 다시 정렬됩니다.

    Ignoring draggable elements

    If the user wants to have interactable children of the main element which have igxDrag instanced, he can set the igxDragIgnore directive in order to make them be ignored by the igxDrag and not perform any dragging action. This will leave these elements be fully interactable and receive all mouse events.

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

    Using the Angular Drop Directive

    When an element that is being dragged using the igxDrag directive needs to be placed in an area, the igxDrop can be used to achieve this behavior. It provides events that you can use to determine if an element is entering the boundaries of the element it is applied to and if it is being released inside it.

    The igxDrop directive can be applied to any DOM element just like the igxDrag directive.

    By default, the igxDrop directive doesn't apply any logic for modifying the dragged element position in the DOM. That's why you need to specify a dropStrategy or apply custom logic. Drop strategies are discussed in the next section.

    Drop Strategies

    The igxDrop comes with 4 drop strategies which are: Default, Prepend, Insert and Append:

    • Default - does not perform any action when an element is dropped onto an igxDrop element and is implemented as a class named IgxDefaultDropStrategy.

    • Append - always inserts the dropped element as a last child and is implemented as a class named IgxAppendDropStrategy.

    • Prepend - always inserts the dropped element as first child and is implemented as a class named IgxPrependDropStrategy.

    • Insert - inserts the dragged element at last position. If there is a child under the element when it was dropped though, the igxDrag instanced element will be inserted at that child's position and the other children will be shifted. It is implemented as a class named IgxInsertDropStrategy.

    The way a strategy can be applied is by setting the dropStrategy input to one of the listed classes above. The value provided has to be a type and not an instance, since the igxDrop needs to create and manage the instance itself.

    public appendStrategy = IgxAppendDropStrategy;

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

    드롭 전략 취소

    When using a specific drop strategy, its behavior can be canceled in the dropped events by setting the cancel property to true. The dropped event is specific to the igxDrop. If you does not have drop strategy applied to the igxDrop canceling the event would have no side effects.

    Example:

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

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

    If you would like to implement your own drop logic, we advise binding to the dropped event and execute your logic there or extend the IgxDefaultDropStrategy class.

    Linking Drag to Drop Element

    Using the dragChannel and dropChannel input on respectively igxDrag and igxDrop directives, you can link different elements to interact only between each other. For example, if an igxDrag element needs to be constrained so it can be dropped on specific igxDrop element and not all available, this can easily be achieved by assigning them the same channel.

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

    오른쪽에 있는 이메일을 왼쪽에 있는 폴더로 드래그하세요.

    Advanced Configuration

    Since both igxDrag and igxDrop combined can be used in many different and complex application scenarios, the following example demonstrates how they can be used in an Kanban board.

    사용자는 각 열의 카드를 재정렬할 수 있습니다. 이는 각 카드에 드롭 영역을 설정하여 수행되므로 다른 카드가 해당 영역에 들어갈 때를 감지하고 런타임 시 전환하여 더 나은 사용자 경험을 제공할 수 있습니다.

    열 간에 카드를 전환하는 기능이 없으면 Kanban 보드가 아닙니다. 카드는 특정 위치의 한 열에서 다른 열로 직접 이동할 수 있습니다. 여기서는 더미 개체를 사용하여 달성되므로 카드를 놓았을 때 카드가 위치할 시각적 영역이 생성됩니다. 카드 드래그가 끝나거나 다른 열에서 나가면 더미 개체가 제거됩니다.

    칸반 보드 주위로 항목을 드래그합니다.

    API

    References

    우리 커뮤니티는 활동적이며 항상 새로운 아이디어를 환영합니다.