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

本文主要是介绍一个简单的Vue2例子讲明白拖拽drag、移入dragover、放下drop的触发机制先后顺序，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

 

几个小细节说明：

1. 执行顺序dragstart→dragover→drop
2. 被拖拽的物体必须要设置draggable="true"（实际上只需要draggable就可以了，默认就是true），否者默认一般是不允许被拖拽的（图片除外）
3. 被放入的位置必须要加上监听@dragover="$event.preventDefault()"，否者不会触发@drop监听
4. 如需要从被拖拽物体传递信息到放置区域中，可以使用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>

下一个进阶的例子，实现拖拽过程中，被放入的区域和放入的物体同时发生状态(样式)变化简单讲述ondragstart、drag、ondragend、ondragenter、ondragover、ondrop、ondragleave七个与拖拽相关的监听事件，并运用实现拖拽过程放置样式变化-CSDN博客文章浏览阅读81次。【代码】一个简单的Vue2例子讲明白拖拽drag、移入dragover、放下drop的触发机制先后顺序。一个简单的Vue2例子讲明白拖拽drag、移入dragover、放下drop的触发机制先后顺序-CSDN博客。时触发(即便不移动也会触发)https://blog.csdn.net/qq_37860634/article/details/136784325

这篇关于一个简单的Vue2例子讲明白拖拽drag、移入dragover、放下drop的触发机制先后顺序的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---