在VueDraggable中将元素从一个数组拖放到另一个数组时，如何获取可拖动元素数据？

编程问答 2022-08-12

问题描述

我正在使用VueDraggable，下面是一个阶段数组，当我们将一个故事从一个阶段转移到另一个阶段时，如何从事件中获取数据（在下面的阶段数组中描述）。

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

假设我们正在将S01从同相的第0个索引（id：PH1）移到同相的第1个索引（id：PH2）。 这样我就能得到

  • pid-从哪个元素移动（即PH1）
  • index-要从其移动的数组中的索引（即0）
  • sid-正在移动的元素的ID（例如ST01）
  • pid-元素要移动到的位置（例如PH2）
  • index-数组在其中移动的索引（即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 方法

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

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

javascriptsortablejsvue.jsvuedraggable