drag

2024年03月26日约627字预计需要3分钟

元素拖拽

const draggableElement = document.getElementById("myElement");

draggableElement.addEventListener("dragstart", (event) => {
  // 设置拖动时显示的文本
  event.dataTransfer.setData("text/plain", "Hello, World!");
  
  // 添加自定义类名
  draggableElement.classList.add("dragging");

  // 修改元素的一些属性
  draggableElement.style.opacity = "0.5";
});

const dropElement = document.getElementById("dropZone");
dropElement.addEventListener("drop", (event) => {
  // 获取纯文本数据
  const textData = event.dataTransfer.getData("text/plain");
  
  // 使用传输的纯文本数据进行操作
  console.log(textData);
});

请注意，为使元素可拖动，您可能还需要在元素上设置draggable属性，如下所示：

1	`<div id="myElement" draggable="true">Drag me!</div>`

以下是一些常见的数据传输格式，可以用作 event.dataTransfer.setData() 方法的 format 参数值：

"text/plain": 纯文本数据。
"text/html": HTML 数据。
"text/uri-list": URI 列表，用于传输链接。
"text/csv": CSV（逗号分隔值）格式的数据。
"application/json": JSON 格式的数据。
"application/xml": XML 格式的数据。
"image/png": PNG 格式的图片数据。
"image/jpeg": JPEG 格式的图片数据。
"audio/mpeg": MP3 音频格式的数据。
"video/mp4": MP4 视频格式的数据。

File文件

文件拖拽 ondrop，e?.dataTransfer?.files

<template>
  <div class="file-drag" :class="{ 'is-drag': (drag === null ? false : true) }" @dragenter="ondragenter" @dragleave="ondragleave"
    @drop.prevent.stop="ondrop" @dragover.prevent="() => {}">
    <slot></slot>
  </div>
</template>
<script>
// @dragover.prevent 解决mac上drop事件无效问题
import { elwarning } from '@/utils';
export default {
  name: 'drag',
  emits: ['drop'],
  props: {
    accept: { // "video/mp4,text/plain"
      type: String
    },
    disabled: {
      type: Boolean
    }
  },
  data() {
    return {
      drag: null
    }
  },
  methods: {
    _init() {
    },
    // over 移动就会触发多次
    ondragover(e) {
      // console.log('ondragover', e);
    },
    ondragenter(e) {
      this.drag = e.target;
      console.log('ondragenter', e);
    },
    ondragleave(e) {
      if (this.drag === e.target) {
        this.drag = null;
        console.log('ondragleave===>', e);
      }
    },
    ondrop(e) {
      this.drag = null;
      if(this.disabled) {
        return elwarning('当前文件拖拽已禁用');
      }
      let files = e?.dataTransfer?.files || [];
      if(this.accept) {
        let accept = this.accept.split(',');
        for(let file of files) {
          if(accept.includes(file.type)) {
            // pass
          } else {
            elwarning('文件类型不正确:' + file.type);
            return;
          }
        }
      }
      console.log('ondrop ondrop', files);
      this.$emit('drop', files);
    },
  },
  mounted() {
    this._init();
  }
}
</script>
<style scoped lang="scss">
.file-drag {
  width: 100%;
  height: 100%;

  &.is-drag {
    background: rgba(0, 135, 255, 0.1);
    border: 2px solid #0087ff;
    position: relative;
  }
}
</style>