Блог

Главная - Вопросы по программированию - Как получить данные перетаскиваемого элемента, когда мы перетаскиваем элемент из одного массива в другой в VueDraggable?

Как получить данные перетаскиваемого элемента, когда мы перетаскиваем элемент из одного массива в другой в VueDraggable?

#javascript #vue.js #draggable #sortablejs #vuedraggable

#javascript #vue.js #перетаскиваемый #sortablejs #vuedraggable

Вопрос:

Я использую VueDraggable, и ниже приведен массив фаз, как я могу получить данные (описанный ниже массив фаз) из событий, когда мы перемещаем историю из одной фазы в другую.

 const phases = [
  {
    pid: 'PH1',
    stories: [
      {
        sid: 'ST01',
        title: 'Story 1',
      },
      {
        sid: 'ST02',
        title: 'Story 2',
      },
    ],
  },
  {
    pid: 'PH2',
    stories: [
      {
        sid: 'ST11',
        title: 'Story 1',
      },
    ],
  },
];

Допустим, мы перемещаем S01 с 0-го индекса в фазе (id: PH1) на 1-й индекс в фазе (id: PH2).
итак, я могу получить

  • pid — из какого элемента перемещается (т. Е. PH1)
  • индекс — индекс в массиве, из которого он перемещается (т. е. 0)
  • sid — идентификатор элемента, который перемещается (т. Е. ST01)
  • pid — к какому элементу перемещается (т. е. PH2)
  • индекс — индекс в массиве, в котором он перемещается (т. е. 1)

что я пробовал

 <draggable class="phase"
              group="containers"
              ghost-class="ghost"
              @end="checkEnd"
              v-model="phaseObj.stories"
              >
              <!-- :list="phaseObj.steps"> -->
      <!------------ STEP ---------------->
        <div v-for="step in phaseObj.stories"
              :key="step.stepId"/>
    </draggable>

Метод проверки

 checkEnd(evt) {
      // HERE I AM GETTNG newDraggableIndex, newIndex, oldDraggableIndex, oldIndex
      // BUT I NEED PID AND SID ALSO
      console.log(evt);
},