drag_and_drop.vue

Simple Drag and drop with changing position

<template>
  <div class="flex justify-center w-full h-full p-3 rounded-b-lg">
    <div 
      class="flex flex-col items-center justify-center mx-2 cursor-move" 
      v-for="(option, index) in game.options"
      :key="option.id"
      draggable="true"
      @dragstart="dragStart(index)"
      @dragover="dragOver(index)"
      @dragend="dragEnd"
      
    >
      <h3 class="w-full text-black text-center text-2xl mb-1">{{index+1}}</h3>
      <div class="flex items-center justify-center rounded-full bg-white p-2"
        :class="{
          'bg-smoke-light' : checkColumnIsDragOver(index),
          'border-3 border-green' : index == option.correctOrder
        }"
      >
        <img class="h-10vh" :src="option.img" alt=""/>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'GameRightOrder',
  props: {
    game: {
      type: Object,
      required: true
    },
    currentTime: {
      type: [Number, String],
      required: true
    }
  },
  data() {
    return {
      draggingIndex: -1,
      draggingOver: -1,
      options: []
    }
  },
  mounted() {
    this.options = this.game.options
  },
  methods: {
    /**
    * Drag and drop optionals
    */
    dragStart(index) {
      this.draggingIndex = index
    },
    dragEnd() {
      this.moveItem({
        from: this.draggingIndex,
        to: this.draggingOver
      })
      this.dragLeave()
    },
    dragOver(index) {
      this.draggingOver = index
    },
    dragLeave() {
      this.draggingIndex = -1
      this.draggingOver = -1
    },
    checkColumnIsDragOver(index) {
      return (this.draggingOver == index)
    },
    moveItem({ from, to}) {
      const one = JSON.parse(JSON.stringify(this.options[from]))
      const two = JSON.parse(JSON.stringify(this.options[to]))
      this.options.splice(from, 1, two)
      this.options.splice(to, 1, one)
      this.checkItems()
    },

    checkItems() {
      const correctItems = this.options.filter((item, index) => item.correctOrder == index)
      if(correctItems.length == this.options.length) {
        this.gameSuccess()
      }
    },

    calculatePoints() {
      switch(true) {
        case (this.currentTime >= 40) :
          return 100
        case (this.currentTime >= 25) :
          return 80
        case (this.currentTime >= 15) :
          return 60
        case (this.currentTime > 0) :
          return 40
        default :
          return 0
      }
    },

    gameSuccess() {
      if(this.game.answer) {
        this.$router.push({ name: 'GameResult', params: { gameSlug: this.game.slug, type: 'success'}})
      } else {
        this.storeProgress()
      }
      this.$emit('stopTime')
    },

    storeProgress() {
      const data = {
        gameId: this.game.id,
        trackId: this.game.trackId,
        resolutionTime: this.currentTime,
        pointsEarned: this.calculatePoints(),
        isFinished: true,
        answerOptions: []
      }
      this.$api.post(`/user/answers/store`, data)
      .then(() => {
        this.$router.push({ name: 'GameResult', params: { gameSlug: this.game.slug, type: 'success'}})
      })
    }
  }
}
</script>

<style>

</style>