在触摸屏上拖放 HTML

时间:2021-06-16 09:46:43

标签: javascript vue.js drag-and-drop touch touchmove

我正在处理一项任务,该任务涉及拖动图像并检查其放置位置并在放置到正确位置时执行操作。虽然它在任何带有鼠标的设备上都可以正常工作,但在触摸屏上却无法正常工作。如何在触摸屏上实现这一目标。使用 Vuejs 2 或 vanilla javascript

拖动项目

<v-row v-for="(item, iterator) in Activity.drag_items" :key="item.class" :class="[item.class, item.status]" class="drag-item">
   <v-img 
      draggable
      @dragstart='startDrag($event, item, iterator)'
      :src="require(`@/assets/img/activities/activity_2/${item.item_img}`)"
      contain
      :class="item.status"
   ></v-img>
</v-row>

掉落物品

<a @drop='onDrop($event, Activity)' @dragover.prevent @dragenter.prevent></a>

关于拖动功能

startDrag(evt, item, index){
        evt.dataTransfer.dropEffect = 'move';
        evt.dataTransfer.effectAllowed = 'move';
        evt.dataTransfer.setData('item', JSON.stringify(item));
        evt.dataTransfer.setData('index', index);
    }

On Drop 函数

onDrop(evt, galaxy_location) {}

0 个答案:

没有答案