I want to create some drag and drop elements but the problem is drop event is not working.
event.preventDefault() but it's not working yet. I read all of the answers about drag and drop issues but they didn't work for me.
const drag1 = document.querySelector(".drag-span-1");
const drop1 = document.querySelector(".drop-span-1");
const mainDiv = document.querySelector(".main-div");
drop1.addEventListener("drop" , (e)=>dropFunc(e , "span"));
drag1.addEventListener("drop" , (e)=>dropFunc(e , "span"));
function dropFunc (e , mode) {
e.preventDefault()
console.log(e , "drop" , mode)
}.main-div{
display: flex;
width: 95vw;
height: 95vh;
border: 1px solid black;
justify-content: flex-start;
align-items: flex-start;
padding: 1rem;
}
.drag-span-1{
display: flex;
justify-content: center;
align-items: center;
padding: 0.3rem;
border: 1px solid black;
cursor: grab;
}
.drop-span-1{
display: flex;
width: 200px;
height: 200px;
margin-left: 3rem;
justify-content: center;
align-items: center;
padding: 1rem;
border: 1px solid black;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="./test.css" rel="stylesheet">
<title>Document</title>
</head>
<body>
<div class="main-div">
<span class="drag-span-1" draggable="true">
drag 1
</span>
<span class="drop-span-1">
drop 1
</span>
</div>
<script src="./test.js"></script>
</body>
</html>Hope this works
const drag1 = document.querySelector(".drag-span-1");
const drop1 = document.querySelector(".drop-span-1");
drop1.addEventListener('dragover', e => {
e.preventDefault();
})
drop1.addEventListener('drop', e => {
e.preventDefault();
drop1.appendChild(drag1);
}).main-div{
display: flex;
width: 95vw;
height: 95vh;
border: 1px solid black;
justify-content: flex-start;
align-items: flex-start;
padding: 1rem;
}
.drag-span-1{
display: flex;
justify-content: center;
align-items: center;
padding: 0.3rem;
border: 1px solid black;
cursor: grab;
}
.drop-span-1{
display: flex;
width: 200px;
height: 200px;
margin-left: 3rem;
justify-content: center;
align-items: center;
padding: 1rem;
border: 1px solid black;
}<div class="main-div">
<span class="drag-span-1" draggable="true">
drag 1
</span>
<span class="drop-span-1">
drop 1
</span>
</div>