Vue Draggable - 드롭할 요소에 액세스합니다.

Vue Draggable - 드롭할 요소에 액세스합니다.

Pivotal Tracker의 API를 사용하여 Kanban 보드를 만들고 Vue 2를 사용하여 빌드하고 있습니다.원래는 jQuery UI와 함께 이 앱을 빌드하고 있으며, Vue Draggable을 드래그 앤 드롭에 사용하는 것이 좋다고 생각하고 있습니다.

제 앱에서는 스토리 카드를 카테고리에 놓을 때 어떤 카테고리에 떨어뜨렸는지 알아야 Pivotal Tracker에 업데이트를 보낼 수 있습니다.스토리 카드는 다음 이미지와 같이 Vue 데이터 개체에 배열로 저장됩니다.Vue 데이터 개체(todos, backlog, inProgress, readyForReview 또는 데이터)

현재 저는 다음 항목을 사용하여 올바른 카테고리에 액세스하는 방법을 찾았습니다.:moveVue Draggable 이벤트입니다.```

<template>
  <div class="board">
    <p class="heading">{{text}}</p>
    <draggable :list="stories" class="draggable-list" :move="checkMove" :options="{group:'cards'}">
      <story-card v-for="(item, index) in stories" :story="item" :key="index"></story-card>
    </draggable>
  </div>
</template>

```

  methods: {
    checkMove (evt) {
      switch (evt.relatedContext.component._uid) {
        case 3:
          (evt.dragged._underlying_vm_.current_state = 'unstarted');
          break;
        case 5:
          (evt.dragged._underlying_vm_.current_state = 'unscheduled');
          break;
        case 7:
          (evt.dragged._underlying_vm_.current_state = 'started');
          break;
        case 9:
          (evt.dragged._underlying_vm_.current_state = 'finished');
          break;
        case 11:
          (evt.dragged._underlying_vm_.current_state = 'accepted');
          break;
      }
    }
  },

한참을 파다 보니evt.relatedContext.component._uid는 각 어레이에 대해 하나의 ID를 반환하지만 변경 후 코드를 저장할 때마다 새로운 ID가 할당되기 때문에 솔루션은 매우 취약합니다.밑줄로 시작하는 이러한 속성은 Vue의 내부 속성이고 동일한 상태를 유지할 수 없기 때문에 피해야 한다고 생각합니다.

Vue Draggable 문서를 읽은 후 확실한 해결책은@end그리고.evt.to그러나 현재 evt.from과 evt.to이 모두 원래 요소를 가리키는 오류가 있습니다. (Link to issue) 내가 드롭하고 있는 요소 또는 적어도 드롭하고 있는 스토리 카드가 추가되어 있는 어레이를 가져와야 합니다.보다 간단하고 신뢰성 높은 솔루션에 대해 올바른 방향으로 안내해 주시면 감사하겠습니다.

언급URL : https://stackoverflow.com/questions/46821272/vue-draggable-get-access-to-the-element-you-are-dropping-on