Interact.js clone on drag (in vue component)

Question

I am building a drag'n drop application with vue, so there are multiple boards and some cards which can be dragged to these boards.

I included interact.js for dragging which works fine but now I am unsure how to implement a clone on drag. Right now the card will be moved from the collection where the user chooses a card and moves with the cursor. What I want to have is that the original card stays in the collection and I get a clone which follows the cursor and acts like the original card when getting dropped (that means there has to be a way to store the id from the original card or access it in any way).

I found an example in the faqs of interact.js but it is not really working so far. Here is my component:

<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>

I would be really glad if someone could help me achieve the desired behavior so thank you already!

UPDATE: So now I get a clone however it always spawns at the bottom of the page. Maybe this is because I append it to the document.body? How can I spawn it at the mouse cursor?

UPDATE 2: This is one example of it working here. I now got the spawning of the element correct after doing it like there. However the div does not move directly with the cursor but kind of faster than it. The direction however seems correct.

Interact.js clone on drag (in vue component)

0 Answers0