通过拖拽添加dom和一些属性

将图片通过拖拽添加到指定位置

<template><div class="draggle-box"><imgclass="draggle-source"src="@/assets/bg/cat.jpg"@dragstart="handleDragStart($event, '图片')"/><divclass="draggle-target"@dragover="handleDragOver"@drop="handleDrop($event)"></div></div>
</template><script setup>
import { ref, reactive } from "vue";
const handleDragStart = (event, props) => {let draggleProps = {src: event.target.getAttribute("src"),type: props,};event.dataTransfer.setData("text/plain", JSON.stringify(draggleProps));
};
const handleDragOver = (event) => {event.preventDefault();
};
const handleDrop = (event) => {console.log(event);event.preventDefault();let draggleProps = JSON.parse(event.dataTransfer.getData("text/plain"));let img = document.createElement("img");img.src = draggleProps.src;img.style.width = "100px";img.style.height = "100px";let text = document.createElement("text");text.textContent = draggleProps.type;event.target.appendChild(img);event.target.appendChild(text);
};
</script><style scoped lang="less">
.draggle-box {border: 1px solid black;width: 600px;height: 600px;margin: 0 auto;
}
.draggle-target {width: 200px;height: 200px;background-color: turquoise;margin: 100px 0 100px 100px;
}
.draggle-source {width: 100px;height: 100px;cursor: grab;
}
</style>

相关博文：看完就懂的前端拖拽那些事