src/components/VDraggable.vue

   1 <template>
   2   <div draggable @dragstart="startDrag" @dragend="endDrag">
   3     <div v-if="!dragging" style="pointer-events: none">
   4       <slot></slot>
   5     </div>
   6     <div v-else class="dragging-box p-3">
   7       Place the component here
   8     </div>
   9   </div>
  10 </template>
  11
  12 <script>
  13 export default {
  14   name: "VDraggable",
  15   data() {
  16     return {
  17       dragging: false,
  18     };
  19   },
  20   methods: {
  21     startDrag(evt) {
  22       evt.dataTransfer.dropEffect = "move";
  23       evt.dataTransfer.effectAllowed = "move";
  24       evt.dataTransfer.setData("component", this);
  25
  26       // Drag image
  27       var img = document.createElement("img");
  28       img.src = "../assets/logo.png";
  29       evt.dataTransfer.setDragImage(img, 0, 0);
  30
  31       this.dragging = true;
  32     },
  33     endDrag() {
  34       this.dragging = false;
  35     },
  36   },
  37 };
  38 </script>
  39
  40 <style lang="scss" scoped>
  41 .dragging-box {
  42   border: 2px dashed;
  43   opacity: 0.6;
  44 }
  45 </style>