一个简单的Vue2例子讲明白拖拽drag、移入dragover、放下drop的触发机制先后顺序-阿里云开发者社区

一个简单的Vue2例子讲明白拖拽drag、移入dragover、放下drop的触发机制先后顺序

2024-04-08 1029

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： 一个简单的Vue2例子讲明白拖拽drag、移入dragover、放下drop的触发机制先后顺序

几个小细节说明：

执行顺序dragstart→dragover→drop

被拖拽的物体必须要设置draggable="true"（实际上只需要draggable就可以了，默认就是true），否者默认一般是不允许被拖拽的（图片除外）

被放入的位置必须要加上监听@dragover="$event.preventDefault()"，否者不会触发@drop监听

如需要从被拖拽物体传递信息到放置区域中，可以使用e.target.dataTransfer的setData设置自定义的参数传值（字符串类型，如需传object请JSON.stringify一下下），使用e.target.dataTransfer的getData去获取对应的内容

<template>
  <div :class="$options.name">
    <div class="drag" draggable @dragstart="dragstart">被拖拽物体</div>
    <div class="drop" @dragover="$event.preventDefault()" @drop="drop">放入的位置</div>
  </div>
</template>
<script>
export default {
  name: "testDrag",
  methods: {
    dragstart(e) {
      let 需要传输的内容 = {
        cssText: `background-color: #F56C6C;color: white;font-size: 24px;`,
        text: `<p>支持HTML</p><br><b>显示这句话</b>`,
      };
      e.dataTransfer.setData("自定义字段名", JSON.stringify(需要传输的内容));
    },
    drop(e) {
      let 需要传输的内容 = JSON.parse(e.dataTransfer.getData("自定义字段名"));
      e.currentTarget.style.cssText = 需要传输的内容.cssText;
      e.currentTarget.innerHTML = 需要传输的内容.text;
    },
  },
};
</script>
<style lang="scss" scoped>
.testDrag {
  .drag {
    width: 100px;
    height: 100px;
    color: white;
    background-color: #f56c6c;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .drop {
    margin-top: 20px;
    width: 300px;
    height: 300px;
    background-color: #409eff;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
  }
}
</style>