简单讲述ondragstart、drag、ondragend、ondragenter、ondragover、ondrop、ondragleave七个与拖拽相关的监听事件，并运用实现拖拽过程放置样式变化

你挚爱的强哥

已于 2024-08-14 11:16:18 修改

阅读量575

点赞数 8

分类专栏： Vue.js JavaScript&TypeScript 文章标签： css javascript 前端

于 2024-03-17 17:01:20 首次发布

随意拷贝莫问题，但是有一点！请务必备注“你挚爱的强哥出品~么么哒”！

本文链接：https://blog.csdn.net/qq_37860634/article/details/136784325

版权

Vue.js 同时被 2 个专栏收录

256 篇文章 23 订阅

订阅专栏

JavaScript&TypeScript

235 篇文章 8 订阅

订阅专栏

事件	描述	监听对象
ondragstart	该事件在用户开始拖动元素时触发	被拖拽物体
drag	该事件在元素正在拖动时触发	被拖拽物体
ondragend	该事件在用户完成元素的拖动时触发	被拖拽物体
ondragenter	该事件在拖动的元素进入放置目标时触发	放入的区域
ondragover	该事件在拖动元素在放置目标上时触发	放入的区域
ondrop	该事件在拖动元素放置在目标区域时触发	放入的区域
ondragleave	该事件在拖动元素离开放置目标时触发	放入的区域

<template>
  <div :class="$options.name">
    <div class="drag" draggable @dragstart="dragstart" @drag="drag" @dragend="dragend" >被拖拽物体</div>
    <div class="drop" @dragenter="dragenter" @dragover="dragover" @drop="drop" @dragleave="dragleave" >放入的位置1</div>
    <div class="drop" @dragenter="dragenter" @dragover="dragover" @drop="drop" @dragleave="dragleave" >放入的位置2</div>
  </div>
</template>
<script>
export default {
  name: "testDrag",
  methods: {
    // 被拖拽物体的监听事件----------------------------------------
    dragstart(e) {
      let 需要传输的内容 = {
        cssText: `background-color: #F56C6C;color: white;font-size: 24px;`,
        text: `物体被放进来了`,
      };
      e.dataTransfer.setData("自定义字段名", JSON.stringify(需要传输的内容));
    },
    drag(e) {
      e.currentTarget.setAttribute("drag", true);
    },
    dragend(e) {
      e.currentTarget.removeAttribute("drag");
    },

    // 放置区域的监听事件----------------------------------------
    dragenter(e) {
      e.currentTarget.setAttribute("dragenter", true);
    },
    dragover(e) {
      e.currentTarget.setAttribute("dragenter", true);
      e.preventDefault(); //ondragover 事件规定在何处放置被拖动的数据。默认地，无法将数据/元素放置到其他元素中。如果需要设置允许放置，我们必须阻止对元素的默认处理方式。
    },
    drop(e) {
      e.currentTarget.removeAttribute("dragenter");
      let 需要传输的内容 = JSON.parse(e.dataTransfer.getData("自定义字段名"));
      e.currentTarget.style.cssText = 需要传输的内容.cssText;
      e.currentTarget.innerHTML = 需要传输的内容.text;
    },
    dragleave(e) {
      e.currentTarget.removeAttribute("dragenter");
    },
  },
};
</script>
<style lang="scss" scoped>
.testDrag {
  .drag {
    width: 100px;
    height: 100px;
    box-sizing: border-box;
    border: 1px solid #eee;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    &[drag] {
      color: #f56c6c;
      border-color: #f56c6c;
      &::after {
        content: "拖拽中";
        position: absolute;
        right: 0;
        top: 0;
        background-color: #f56c6c;
        color: white;
        font-size: 14px;
      }
    }
  }
  .drop {
    margin-top: 20px;
    width: 200px;
    height: 200px;
    box-sizing: border-box;
    border: 1px solid #eee;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    position: relative;
    &[dragenter] {
      color: #f56c6c;
      border-color: #f56c6c;
      &::after {
        content: "物体进入区域";
        position: absolute;
        right: 0;
        top: 0;
        background-color: #f56c6c;
        color: white;
        font-size: 14px;
      }
    }
  }
}
</style>

基于下面的例子一个简单的Vue2例子讲明白拖拽drag、移入dragover、放下drop的触发机制先后顺序-CSDN博客文章浏览阅读81次。【代码】一个简单的Vue2例子讲明白拖拽drag、移入dragover、放下drop的触发机制先后顺序。https://blog.csdn.net/qq_37860634/article/details/136783097