Made dragging more robust and fixed a bug

website/studerende-dk/src/views/Home.vue

 <template>
   <div class="home">
     <div id="grid">
-      <div @mousedown="resizeVertical($event, rowIndex)" @mouseup="saveAndStopResizing()" :id="rowIndex" class="row" :class="{ drag: draggedBlock !== null }" 
+      <div @mousedown="resizeVertical($event, rowIndex)" @mouseup="saveAndStopResizing()" :id="rowIndex" class="row" :class="{ drag: dragging }" 
         v-for="(rowBlock, rowIndex) in layout" :key="rowIndex" :style="{ height: rowBlock.height + 'px' }" @mouseleave="cancelRemoveRow(rowIndex)"
         @dragover="dragHover($event, rowIndex)" @dragleave="hidePreview()" @drop="drop($event, rowIndex)">
-        <span class="col-preview">
-          <component :is="previewType"></component>
+        <span class="col-preview" v-show="rowIndex == activePreview.row" :ref="'preview' + rowIndex">
+          <component :is="activePreview.type"></component>
         </span>
         <div @mousedown="resizeHorizontal($event, rowIndex, colIndex)" @mouseup="saveAndStopResizing()" :id="rowIndex+','+colIndex" class="col" :class="colBlock.type"
           v-show="!isDragged(rowIndex, colIndex)" v-for="(colBlock, colIndex) in rowBlock.blocks" :key="colIndex" :style="{ 'flex-grow': colBlock.width, 'order': colIndex }">
@@ -123,9 +123,10 @@ export default {
         {name: "Kalender", type: "Calendar"}
       ],
       prevWinWidth: 1000,
-      draggedBlock: null,
-      activePreview: null,
+      draggedBlock: { row: null, col: null },
+      activePreview: { row: null, type: null },
       dragEnabled: true,
+      dragging: false,
       deleting: false,
       resizing: false
     }
@@ -384,13 +385,15 @@ export default {
       // to be fired immediately if the timeout is not used
       setTimeout(() => {
         this.draggedBlock = { row, col };
+        this.dragging = true;
 
-        this.showDropPreview(row, col);
+        this.showDropPreview(event, row, col);
       }, 10);
     },
 
     stopDrag() {
-      this.draggedBlock = null;
+      this.dragging = false;
+      this.hidePreview();
     },
 
     getDropPosition(event, row) {
@@ -445,16 +448,12 @@ export default {
       if (position === null)
         return;
 
-      this.showDropPreview(row, position);
+      this.showDropPreview(event, row, position);
       
       event.preventDefault();
     },
 
-    showDropPreview(row, position) {
-      if (this.activePreview !== null)
-        this.hidePreview();
-      this.activePreview = row;
-
+    showDropPreview(event, row, position) {
       const origRow = this.draggedBlock.row;
       const origCol = this.draggedBlock.col;
       const origBlock = this.layout[origRow].blocks[origCol];
@@ -464,20 +463,15 @@ export default {
         position++;
       }
 
-      const targetRow = document.getElementById(row.toString());
-      const preview = targetRow.getElementsByClassName('col-preview')[0];
+      const preview = this.$refs['preview' + row];
       preview.style.order = position;
       preview.style.flexGrow = origBlock.width;
-      preview.style.display = 'block';
+
+      this.activePreview.row = row;
+      this.activePreview.type = origBlock.type;
     },
 
     drop(event, row) {
-      // If events get processed in an unfortunate order
-      if (this.draggedBlock === null)
-        return;
-
-      this.hidePreview();
-
       const position = this.getDropPosition(event, row);
 
       // Do nothing if row full
@@ -514,22 +508,16 @@ export default {
         }
       }
       
-      this.draggedBlock = null;
+      this.hidePreview();
       this.saveLayout("isaac");
     },
 
     hidePreview() {
-      if (this.activePreview === null)
-        return;
-
-      const targetRow = document.getElementById(this.activePreview.toString());
-      const preview = targetRow.getElementsByClassName('col-preview')[0];
-      preview.style.display = 'none';
-      this.activePreview = null;
+      this.activePreview = { row: null, type: null };
     },
 
     isDragged(row, col) {
-      return row === this.draggedBlock?.row && col === this.draggedBlock?.col;
+      return this.dragging && row === this.draggedBlock?.row && col === this.draggedBlock?.col;
     },
 
     saveLayout(id) {
@@ -564,18 +552,6 @@ export default {
     this.mobileLayoutResize();
   },
 
-  computed: {
-    previewType() {
-      if (this.draggedBlock == null)
-        return null;
-
-      const origRow = this.draggedBlock.row;
-      const origCol = this.draggedBlock.col;
-
-      return this.layout[origRow].blocks[origCol].type;
-    }
-  },
-
   provide() {
     return {
       dragEnabled: computed(() => this.dragEnabled),
@@ -635,7 +611,6 @@ export default {
   }
 
   .col-preview {
-    display: none;
     opacity: 0.5;
   }