几个小细节说明：
- 执行顺序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>
下一个进阶的例子，实现拖拽过程中，被放入的区域和放入的物体同时发生状态(样式)变化
