vu移动端使用原生拖拽 (ondragstart、ondrop等事件)

起因

用了原生的拖拽事件，在pc上正常使用，但是在移动端上不生效，没法拖动。查到一个库可用：
mobile-drag-drop - npm (npmjs.com)

使用

1. 安装库：通过npm安装mobile-drag-drop库。

npm install mobile-drag-drop --save

2. 引入样式和脚本：在Vue项目的入口文件（比如main.js）中引入mobile-drag-drop的样式和脚本。

import 'mobile-drag-drop/default.css';
import { polyfill } from 'mobile-drag-drop';

// 可选引入滚动行为的脚本
import { scrollBehaviourDragImageTranslateOverride } from 'mobile-drag-drop/scroll-behaviour';

// 可选的配置项
const options = {
    // 使用这个选项以应用滚动行为
    dragImageTranslateOverride: scrollBehaviourDragImageTranslateOverride
};

// 初始化polyfill
polyfill(options);

3. 设置dragenter监听器：在需要拖拽的元素周围设置dragenter监听器，并在其中调用event.preventDefault()。

<template>
  <div>
    <!-- 设置需要拖拽的元素，并添加dragenter监听器 -->
    <div class="draggable" @dragenter="handleDragEnter">
      Drag Me
    </div>
    <!-- 设置拖放目标区域 -->
    <div class="dropzone" @dragenter="handleDragEnter" @drop="onDrop">
      Drop Zone
    </div>
  </div>
</template>

<script>
export default {
  methods: {
    handleDragEnter(event) {
      // 阻止浏览器默认行为（重要不然drop不生效）
      event.preventDefault();
    }
  }
}
</script>

<style scoped>
/* 可以自定义样式 */
</style>

4. 添加其他拖放事件的处理逻辑：根据需要，处理其他拖放事件，如dragstart、dragover、drop等。

这样，在Vue项目中就可以使用mobile-drag-drop库实现拖放功能了。

其它拖拽库

vue-draggable-plus | vue-draggable-plus (gitee.io)