Ember.js에서 드래그 앤 드롭 기능을 구현하는 방법은 다양합니다. 일반적으로 ember-drag-drop 같은 애드온을 사용하는 것이 가장 쉽고 효과적인 방법입니다. 아래는 ember-drag-drop를 사용하여 드래그 앤 드롭 기능을 구현하는 간단한 예제입니다.

1. ember-drag-drop 설치

먼저, Ember 애플리케이션에 ember-drag-drop 애드온을 설치해야 합니다. 다음 명령어를 사용하여 설치할 수 있습니다:

ember install ember-drag-drop

1. 드래그 앤 드롭 컴포넌트 생성

다음으로, 드래그 앤 드롭을 구현할 컴포넌트를 생성해야 합니다. 아래와 같이 컴포넌트를 생성할 수 있습니다:

ember generate component drag-drop-example

생성된 컴포넌트 파일(drag-drop-example.js)을 열고 다음과 같이 코드를 작성합니다:

// app/components/drag-drop-example.js

import Component from '@ember/component';

export default Component.extend({
  dragOver(event) {
    event.preventDefault();
  },

  drop(event) {
    event.preventDefault();
    const data = event.dataTransfer.getData('text');
    // 드롭된 데이터 처리 로직 구현
  }
});

위 코드는 dragOver와 drop 메소드를 구현하여 드래그된 요소를 받고 처리하는 로직을 추가한 것입니다.

1. 템플릿 파일 수정

컴포넌트의 템플릿 파일(drag-drop-example.hbs)을 열고 드래그 앤 드롭 기능을 적용할 요소를 추가합니다:

<!-- app/templates/components/drag-drop-example.hbs -->

<div
  class="draggable-item"
  draggable="true"
  
>
  드래그 앤 드롭 요소
</div>

<div
  class="drop-target"
  
  
>
  드롭 영역
</div>

위 코드에서 .draggable-item 클래스를 가진 요소는 드래그 가능한 요소로 설정되고, .drop-target 클래스를 가진 요소는 드롭 영역으로 설정됩니다.

1. 컨트롤러나 라우터에서 액션 구현

드래그 앤 드롭 컴포넌트에서 발생하는 액션을 처리할 수 있는 컨트롤러나 라우터에서 액션을 구현해야 합니다. 예를 들어, 컨트롤러에서 다음과 같이 액션 메소드를 구현할 수 있습니다:

// app/controllers/index.js

import Controller from '@ember/controller';

export default Controller.extend({
  actions: {
    dragStart() {
      // 드래그 액션 처리 로직 구현
    },

    dragOver() {
      // 드래그 오버 액션 처리 로직 구현
    },

    drop() {
      // 드롭 액션 처리 로직 구현
    }
  }
});

위 코드에서 각 액션 메소드에서 해당 액션들에 대한 처리 로직을 구현하면 됩니다.

이제 위와 같이 ember-drag-drop 애드온을 사용하여 Ember.js에서 드래그 앤 드롭 기능을 구현할 수 있습니다. 렌더링된 드래그 앤 드롭 요소를 드래그하여 드롭 영역에 놓으면 dragOver와 drop 액션 메소드가 호출되고, 각 액션에 대한 로직을 구현하여 원하는 동작을 수행할 수 있습니다.

더 많은 세부적인 사항과 옵션은 ember-drag-drop 애드온의 공식문서를 참조하시기 바랍니다.