vue 以拖拽放置为核心开发的小游戏

        思路：通过拖拽不同的色块，到指定位置放置后显示对应的图片

使用方法

@dragstart="DragStart($event)"

@dragend="DragEnd($event)"

@dragenter="DragEnter($event)"

@dragover="DragOver($event)"

@drop="Drop($event)"

实现鼠标拖拽，如果是触摸屏则使用方法

@touchstart.stop="down($event)"

@touchmove.stop="move($event)"

@touchend.stop="end($event)"

实现触摸屏拖拽效果

代码

DragStart(ev) {

      //保存拖拽信息

      ev.dataTransfer.setData('id', ev.target.id)

    },

 DragEnter(ev) {

      // 阻止默认行为

      ev.preventDefault()

    },

    DragOver(ev) {

      // 阻止默认行为

      ev.preventDefault()

    },

 Drop(ev) {

      // 阻止默认行为

      ev.preventDefault()

      // 获取拖拽数据

      var id = ev.dataTransfer.getData('id')

      var tag = ev.target.id

     //后面便是通过判断来控制data里的数据以达到显示对应图片

    },

DragEnd(ev) {

      // 清除拖拽数据

      ev.dataTransfer.clearData('id')

    },

下面是实现效果