Untitled

<template>
  <div id="app">
    <div id="draggable" class="draggable">
      Drag Me!
    </div>
    <div id="dropzone" class="dropzone">
      Drop Here!
    </div>
  </div>
</template>

<script>
import interact from 'interactjs';

export default {
  mounted() {
    this.setupInteract();
  },
  methods: {
    setupInteract() {
      const position = { x: 0, y: 0 };
      
      interact('.draggable')
        .draggable({
          listeners: {
            start(event) {
              event.target.setAttribute('data-x', position.x);
              event.target.setAttribute('data-y', position.y);
            },
            move(event) {
              position.x += event.dx;
              position.y += event.dy;
              
              event.target.style.transform = `translate(${position.x}px, ${position.y}px)`;
            },
            end(event) {
              if (!event.interaction.dropTarget) {
                position.x = parseFloat(event.target.getAttribute('data-x'));
                position.y = parseFloat(event.target.getAttribute('data-y'));
                
                event.target.style.transform = `translate(${position.x}px, ${position.y}px)`;
              }
            },
          },
        });
      
      interact('.dropzone').dropzone({
        accept: '.draggable',
        overlap: 0.5,
        ondropactivate(event) {
          event.target.classList.add('drop-active');
        },
        ondropdeactivate(event) {
          event.target.classList.remove('drop-active');
        },
        ondragenter(event) {
          event.target.classList.add('drop-target');
        },
        ondragleave(event) {
          event.target.classList.remove('drop-target');
        },
        ondrop(event) {
          event.relatedTarget.textContent = 'Dropped!';
        },
      });
    },
  },
};
</script>

<style>
.draggable {
  width: 100px;
  height: 100px;
  background: #76C7C0;
  color: white;
  text-align: center;
  line-height: 100px;
  cursor: move;
}

.dropzone {
  width: 200px;
  height: 200px;
  position: absolute;
  right: 0;
  background: #EFECCA;
  text-align: center;
  line-height: 200px;
}

.drop-active {
  background: #FFEB3B;
}

.drop-target {
  background: #4CAF50;
}
</style>