Track drag status via store

src/components/Lists/List.vue

@@ -114,7 +114,7 @@ export default {
   },
 
   computed: {
-    ...mapState(['user', 'gameLists', 'platform', 'settings', 'games']),
+    ...mapState(['user', 'gameLists', 'platform', 'settings', 'games', 'dragging']),
 
     autoSortEnabled() {
       const list = this.list[this.listIndex];
@@ -241,12 +241,12 @@ export default {
     },
 
     dragStart({ item }) {
-      this.dragging = true;
+      this.$store.commit('SET_DRAGGING_STATUS', true);
       this.draggingId = item.id;
-      this.$emit('dragStart');
     },
 
     dragEnd() {
+      this.$store.commit('SET_DRAGGING_STATUS', false);
       this.$emit('dragEnd');
     },
   },
@@ -268,8 +268,8 @@ export default {
     max-height: calc(100vh - 100px);
 
     @media($small) {
-      .games {
-        &:not(.dragging) {
+      &:not(.dragging) {
+        .games {
           scroll-snap-type: y mandatory;
           scroll-padding: $gp / 2;
 

src/pages/GameBoard.vue

@@ -9,7 +9,6 @@
       :game-list="list.games"
       :list-index="listIndex"
       :key="`${list.name}-${listIndex}`"
-      @dragStart="dragStart"
       @dragEnd="dragEnd"
     />
 
@@ -41,7 +40,6 @@ export default {
 
   data() {
     return {
-      dragging: false,
       draggingId: null,
       loading: false,
       gameData: null,
@@ -51,7 +49,7 @@ export default {
   },
 
   computed: {
-    ...mapState(['user', 'gameLists', 'platform', 'games']),
+    ...mapState(['user', 'gameLists', 'platform', 'games', 'dragging']),
 
     list() {
       return this.gameLists && this.platform && this.gameLists[this.platform.code]
@@ -74,12 +72,7 @@ export default {
   },
 
   methods: {
-    dragStart() {
-      this.dragging = true;
-    },
-
     dragEnd() {
-      this.dragging = false;
       this.draggingId = null;
       this.updateLists();
     },

src/store/mutations.js

@@ -49,6 +49,10 @@ export default {
     state.tags = tags;
   },
 
+  SET_DRAGGING_STATUS(state, status) {
+    state.dragging = status;
+  },
+
   SET_NOTES(state, notes) {
     state.notes = notes;
   },

src/store/state.js

@@ -3,6 +3,7 @@ export default {
   releases: null,
   tags: {},
   notes: {},
+  dragging: false,
   activeListIndex: null,
   gameLists: {},
   settings: null,