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';
// 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';
// 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 가져왔으므로 igxDrag 및 igxDrop 지시문 사용을 시작할 수 있습니다.

    Using the Angular Drag Directive

    Angular 애플리케이션 내부의 요소를 페이지의 한 위치에서 다른 위치로 드래그해야 하는 경우 igxDrag 지시문은 이 동작을 달성하는 데 도움이 되도록 설계되었습니다. igxDrop 지시문과 함께 드래그한 요소 배치도 수행할 수 있으므로 완전한 대화형 응용 프로그램을 사용할 수 있습니다.

    Dragging Fundamentals

    최종 사용자가 어느 방향으로든 5px 이상 스와이프하면 드래그 작업이 시작됩니다. 이는 사용자 정의가 가능하며 dragTolerance 입력을 사용하여 변경할 수 있습니다. 그렇지 않으면 상호 작용이 클릭으로 간주되고 dragClick 이벤트가 트리거됩니다.

    드래그가 시작되면 dragStart 이벤트가 트리거됩니다. 실제 이동이 발생하지 않도록 하려면 cancel 속성을 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 및 pageY)를 기준으로 특정 위치 또는 지정된 요소의 위치로 요소에 애니메이션을 적용합니다. 요소가 현재 드래그되고 있지 않으면 어쨌든 애니메이션이 적용되거나 고스트를 생성하여 원하는 위치로 애니메이션이 적용됩니다.

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

    전환 애니메이션이 끝나면 고스트가 생성되면 제거되고 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에서 드래그된 요소 위치를 수정하기 위한 로직을 적용하지 않습니다. 그렇기 때문에 dropStrategy 지정하거나 사용자 정의 논리를 적용해야 합니다. 드롭 전략은 다음 섹션에서 논의됩니다.

    Drop Strategies

    ​igxDrop 에는 Default, Prepend, Insert 및 Append의 4가지 드롭 전략이 있습니다.

    • Default- 요소가 igxDrop 요소에 놓일 때 어떤 작업도 수행하지 않으며 IgxDefaultDropStrategy 라는 클래스로 구현됩니다.

    • Append- 항상 삭제된 요소를 마지막 하위 항목으로 삽입하고 IgxAppendDropStrategy 라는 클래스로 구현됩니다.

    • Prepend- 항상 삭제된 요소를 첫 번째 하위 항목으로 삽입하고 IgxPrependDropStrategy 라는 클래스로 구현됩니다.

    • Insert- 드래그한 요소를 마지막 위치에 삽입합니다. 요소를 놓을 때 요소 아래에 하위 요소가 있는 경우 igxDrag 인스턴스 요소는 해당 하위 요소의 위치에 삽입되고 다른 하위 요소는 이동됩니다. 이는 IgxInsertDropStrategy 라는 클래스로 구현됩니다.

    전략을 적용할 수 있는 방법은 dropStrategy 입력을 위에 나열된 클래스 중 하나로 설정하는 것입니다. igxDrop 인스턴스 자체를 생성하고 관리해야 하므로 제공된 값은 인스턴스가 아닌 유형이어야 합니다.

    public appendStrategy = IgxAppendDropStrategy;

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

    드롭 전략 취소

    특정 드롭 전략을 사용할 때 해당 동작은 다음에서 취소될 수 있습니다. dropped 이벤트를 설정하여 cancel 속성을 true로 설정합니다. 그만큼 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 보드에서 이들을 사용하는 방법을 보여줍니다.

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

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

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

    API

    References

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