Javascript 拖动时Interact.js克隆（在vue组件中）

我正在用vue构建一个拖放应用程序，因此有多个板和一些可以拖到这些板上的卡

我包括了interact.js用于拖动，这很好，但现在我不确定如何在拖动时实现克隆。 现在，卡片将从用户选择卡片并使用光标移动的集合中移动。我想要的是，原始卡保留在集合中，我得到一个克隆，它跟随光标，在被丢弃时就像原始卡一样（这意味着必须有一种方法来存储原始卡的id或以任何方式访问它）

我在interact.js的FAQ中找到了一个例子，但到目前为止还没有真正起作用。 以下是我的组件：

<template>
  <v-card
    class="primary draggable-card"
    :id = "id"
    :draggable = "false"
    @dragover.stop
    ref="interactElement"
  >
    <slot/>
  </v-card>
</template>

<script>
import interact from 'interactjs';

export default {
  props: ['id', 'draggable'],
  data() {
    return {
      isInteractAnimating: true,
    };
  },
  methods: {
    dragMoveListener: (event) => {
      /* eslint-disable */
      var target = event.target;
      // keep the dragged position in the data-x/data-y attributes
      var x = (parseFloat(target.getAttribute('data-x')) || 0) + event.dx;
      var y = (parseFloat(target.getAttribute('data-y')) || 0) + event.dy;

      // translate the element
      target.style.webkitTransform =
        target.style.transform =
          'translate(' + x + 'px, ' + y + 'px)';

      // update the posiion attributes
      target.setAttribute('data-x', x);
      target.setAttribute('data-y', y);
    }
    /* eslint-enable */
  },
  mounted() {
    const element = this.$refs.interactElement;
    console.log(element);
    const component = this;

  interact('.draggable-card')
    .draggable({ 
      manualStart: true 
      onmove: component.dragMoveListener,
    })
    .on('move', function (event) {
      var interaction = event.interaction;

      // if the pointer was moved while being held down
      // and an interaction hasn't started yet
      if (interaction.pointerIsDown && !interaction.interacting()) {
        var original = event.currentTarget,
        // create a clone of the currentTarget element
        clone = event.currentTarget.cloneNode(true);

        // insert the clone to the page
        // TODO: position the clone appropriately
        document.body.appendChild(clone);

        // start a drag interaction targeting the clone
        interaction.start({ name: 'drag' },
          event.interactable,
          clone);
      } else {
        component.dragMoveListener(event);
      }
    });
  }, 
  /* eslint-enable */
};
</script>

<style scoped>
  .v-card {
    height: 7rem;
    width: 7rem;
  }

  .draggable-card{
    -ms-touch-action: none;
    touch-action: none;
    user-select: none;
  }
</style>

从“interactjs”导入interact；
导出默认值{
道具：['id'，'draggable']，
数据（）{
返回{
IsInteracting动画：正确，
};
},
方法：{
dragMoveListener:（事件）=>{
/*eslint禁用*/
var target=event.target；
//在data-x/data-y属性中保持拖动位置
var x=（parseFloat（target.getAttribute（'data-x'））| | 0）+event.dx；
变量y=（parseFloat（target.getAttribute（'data-y'））| | 0）+event.dy；
//翻译元素
target.style.webkitTransform=
target.style.transform=
'翻译（'+x+'px'，+y+'px）'；
//更新posiion属性
target.setAttribute（'data-x'，x）；
target.setAttribute（'data-y'，y）；
}
/*eslint使能*/
},
安装的（）{
常量元素=此。$refs.interactiveElement；
控制台日志（元素）；
const component=this；
交互（“.可拖动卡”）
.draggable（{
手动启动：正确
onmove:component.dragMoveListener，
})
.on（'move'，函数（事件）{
var交互=事件交互；
//如果在按住指针的同时移动了指针
//而且互动还没有开始
if（interaction.pointerIsDown&&！interaction.interacting（））{
var original=event.currentTarget，
//创建currentTarget元素的克隆
clone=event.currentTarget.cloneNode（true）；
//将克隆插入页面
//TODO:正确定位克隆
document.body.appendChild（克隆）；
//启动以克隆为目标的拖动交互
interaction.start（{name:'drag'}，
事件。可交互，
克隆）；
}否则{
dragMoveListener组件（事件）；
}
});
}, 
/*eslint使能*/
};
.信用卡{
身高：7雷姆；
宽度：7雷姆；
}
.可拖动卡{
-ms触摸动作：无；
触摸动作：无；
用户选择：无；
}

如果有人能帮我达到期望的行为，我会非常高兴，所以已经谢谢你了

更新： 所以现在我得到了一个克隆，但它总是在页面底部生成。 也许这是因为我将其附加到document.body？ 如何在鼠标光标处生成它？

更新2： 这是它工作的一个例子。 在像这样做之后，我现在得到了正确的元素生成。 然而，div并不直接随光标移动，而是比光标移动快一些。然而，方向似乎是正确的