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

    이제 Ignite UI for Angular 드래그 앤 드롭 모듈이나 지시어를 가져왔으니, 이제 andigxDrag 지시를 사용할igxDrop 수 있습니다.

    Using the Angular Drag Directive

    Angular 애플리케이션 내 요소를 페이지의 한 곳에서 다른 곳으로 드래그해야 할 때, 이 지침은igxDrag 이를 달성하도록 설계되었습니다. 지침과igxDrop 함께 드래그 요소의 배치도 가능하여 완전한 인터랙티브 적용이 가능합니다.

    Dragging Fundamentals

    드래그 작업은 사용자가 어느 방향으로든 최소 5픽셀 이상 스와이프하면 시작됩니다. 이 기능은 커스터마이징이 가능하며 입력을dragTolerance 통해 변경할 수 있습니다. 그렇지 않으면 상호작용이 클릭으로 간주되어 이벤트가dragClick 트리거됩니다.

    드래그가 시작되면,dragStart 이벤트가 발동됩니다. 실제 이동을 막기 위해 이벤트를 취소할 수 있습니다.cancel property를true.

    실제 이동이 실행되기 전에,dragMove 포인터의 마지막 위치와 다음 위치를 포함하는 이벤트도 트리거됩니다. 이 기능은 요소를 끌고 다니는 동안 움직임이 감지될 때마다 발동됩니다.

    사용자가 마우스를 놓거나 터치를 놓으면 드래그 고스트 요소가 DOM에서 제거되고 이벤트가dragEnd 발동됩니다.

    Note

    이벤트의dragMove 특성상 짧은 시간 내에 여러 번 트리거될 수 있어, 트리거 시 수행된 복잡한 작업에서 성능 문제가 발생할 수 있습니다.

    Dragging With Ghost

    ​igxDrag이 지시는 템플릿에 추가하기만 하면 어떤 DOM 요소든 적용할 수 있습니다.

    <div igxDrag>Drag me</div>

    지시의 기본 동작igxDrag은 기본 요소를 수정하지 않고 유지하며, 최종 사용자가 드래그 작업을 수행할 때 고스트 요소를 생성하는 것입니다.

    고스트가 페이지에 렌더링되기 전에,ghostCreate 곧 추가될 고스트 요소의 정보를 담은 이벤트가 트리거됩니다. 이벤트는 이벤트 직후에dragStart 트리거됩니다. 만약 이 취소dragStart 되면 유령이 생성되지 않고, 이벤트가ghostCreate 그에 맞게 발동되지 않습니다.

    유령이 제거되기 직전에 이벤트가ghostDestroy 발동됩니다.

    Customizing The Ghost

    고스트 요소는 기본적으로 사용igxDrag 된 기본 요소의 복사본입니다. 입력에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

    디렉티브가 적용되는 기본 요소를igxDrag 이동하고 싶다면, 입력을ghost로false 설정하면 가능합니다. 이렇게 하면 추가 유령 요소가 렌더링되지 않고, 드래그할 때 커스텀 스타일링을 적용해야 할 때는 기본 요소에 직접 적용할 수 있습니다.

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

    Dragging Using a Handle

    기본적으로 전체 요소를 사용해 드래그할 자식igxDrag을 지정할 수 있습니다. 이 명령은 명령어를 사용하여igxDragHandle 수행할 수 있으며, 내부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>

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

    애니메이션

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

    전환 애니메이션igxDrag은 언제든지 적용할 수 있지만, 끝을 드래그하거나 요소가 현재 드래그되지 않은 상태일 때 사용하는 것이 권장됩니다. 이는 와transitionToOrigin​transitionTo 메서드를 사용하여 달성할 수 있습니다.

    ​transitionToOrigin이 방법은 이름 그대로 현재 드래그 중인 요소 또는 그 유령을 드래그가 시작된 시작 위치로 애니메이션 처리합니다. 이 메서드는transitionTo 요소를 페이지에 대한 특정 위치(즉pageX, andpageY) 또는 지정된 요소의 위치에 애니메이션화합니다. 만약 해당 요소가 현재 드래그되지 않는다면, 어쨌든 애니메이션이 되거나 고스트를 만들어 원하는 위치로 애니메이션화합니다.

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

    전환 애니메이션이 끝나면 유령이 생성되면 제거되고 지시문은igxDrag 원래 상태로 돌아갑니다. 유령이 생성되지 않으면 그 위치를 유지합니다. 두 경우 모두 애니메이션이 지속되는 시간에 따라 이벤트가transitioned 트리거됩니다. 애니메이션이 적용되지 않으면 즉시 트리거됩니다.

    요소 변환을 포함하는 다른 종류의 애니메이션도 만들 수 있습니다. 다른 요소들처럼 Angular 애니메이션이나 기본 요소나 그 유령 요소에igxDrag 대한 CSS 애니메이션을 사용할 수 있습니다. 유령에 적용하고 싶다면 커스텀 유령을 정의하고 그 요소에 애니메이션을 적용해야 합니다.

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

    Ignoring draggable elements

    사용자가 igxDrag가 인스턴스화된 메인 요소의 상호작용 가능한 자식들을 원한다면, igxDrag가 이를 무시하고 드래그 동작을 수행하지 않도록 명령어를 설정할igxDragIgnore 수 있습니다. 이렇게 하면 이 요소들이 완전히 상호작용 가능하며 모든 마우스 이벤트를 수신할 수 있습니다.

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

    Using the Angular Drop Directive

    지시를 사용해igxDrag 끌어당기는 요소가 특정 영역에 배치되어야 할 때, 이igxDrop 동작을 구현하는 데 사용할 수 있습니다. 이 기능은 해당 요소가 적용된 요소의 경계에 진입하는지, 그리고 그 경계 안에서 해제되는지 판단하는 데 사용할 수 있는 이벤트를 제공합니다.

    ​igxDrop이 지시는 지시와 마찬가지로igxDrag 어떤 DOM 요소에도 적용할 수 있습니다.

    기본적으로igxDrop이 지시는 DOM에서 드래그된 요소 위치를 수정하는 로직을 적용하지 않습니다. 그래서 adropStrategy를 지정하거나 커스텀 로직을 적용해야 합니다. 드롭 전략은 다음 섹션에서 다룹니다.

    Drop Strategies

    이 게임에는igxDrop 4가지 드롭 전략이 포함되어 있습니다:Default​Prepend​Insert​Append​

    • Default- 요소가 요소에 드롭igxDrop 되어 클래스로 구현IgxDefaultDropStrategy 될 때 어떤 동작도 수행하지 않습니다.

    • Append- 항상 삭제된 요소를 마지막 자식으로 삽입하며, 이름이 명IgxAppendDropStrategy 명된 클래스로 구현됩니다.

    • Prepend- 항상 삭제된 요소를 첫 번째 자식으로 삽입하며, 이름이IgxPrependDropStrategy 명명된 클래스로 구현됩니다.

    • Insert- 드래그된 요소를 마지막 위치에 삽입합니다. 하지만 아이템이 드랍되었을 때 그 요소 아래에 자식이 있다면,igxDrag 인스턴스화된 요소가 그 자식의 위치에 삽입되고 다른 자식들은 이동하게 됩니다. 이 클래스는 이름이IgxInsertDropStrategy 붙은 클래스로 구현됩니다.

    전략을 적용하는 방법은 위에 나열된 클래스 중 하나로 입력을dropStrategy 설정하는 것입니다. 제공되는 값은 인스턴스가 아니라 타입이어야 하며, 인스턴스 자체를 생성하고 관리해야 하기 때문입니다igxDrop.

    public appendStrategy = IgxAppendDropStrategy;

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

    드롭 전략 취소

    특정 드롭 전략을 사용할 때, 그 동작은 다음 조건에서 상쇄될 수 있습니다.dropped 사건cancel 재산을 참으로 전환합니다. 그dropped 이벤트는 특정igxDrop. 만약 드롭 전략을 적용하지 않았다면,igxDrop 행사를 취소해도 부작용은 없을 거예요.

    Example:

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

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

    직접 드롭 로직을 구현하고 싶다면, 이벤트에dropped 바인딩하고 그곳에서 로직을 실행하거나 클래스를IgxDefaultDropStrategy 확장하는 것을 권장합니다.

    Linking Drag to Drop Element

    ​dragChannel그리고dropChannel 각각 에 대한 입력igxDrag 그리고igxDrop 지시문은 서로 다른 요소들끼리만 상호작용하도록 연결할 수 있습니다. 예를 들어, 만약igxDrag 원소는 특정 요소에 드롭할 수 있도록 제한되어야 합니다igxDrop 모두 사용 가능한 것은 아니며, 동일한 채널을 할당하면 쉽게 달성할 수 있습니다.

    <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

    두 가지igxDrag 모두와igxDrop 결합은 다양한 복잡한 응용 시나리오에서 사용할 수 있으므로, 다음 예시는 칸반 보드에서 어떻게 활용할 수 있는지 보여줍니다.

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

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

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

    API

    References

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