HTML
<DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,
initial-scale=1.0">
<link rel="stylesheet" href="styles.css">
<title Drag and drop /title>
</head>
<body>
<section
class="father_zone">
<div
class="content_zone">
<div
class="zone box2">
<p
class="text zone_drag" draggable="true" title="can you drag me to
the other box">
Drag
and drop /p>
</div>
<div
class="zone box" /div>
</div>
</section>
</body>
</html>
CSS
.father_zone{
width: 100%;
display: flex;
justify-content: center;
margin-top: 1rem;
}
.content_zone{
width: 50%;
height: 50%;
background-color: rgb(237, 245, 245);
border-radius: 0.6rem;
cursor: pointer;
}
.content_zone:hover{
background-color: rgb(203, 240, 240);
}
.zone_drag{
padding: 1rem;
background-color: aliceblue;
cursor: grab;
border-radius: 0.5rem;
}
.zone{
width: 40%;
margin: 2rem auto 2rem auto;
display: flex;
justify-content: center;
border: 0.1rem solid black;
padding: 1rem 2rem;
border-radius: 0.5rem;
background-color: rgb(181, 134, 224);
}
Javascript
const drag = document.querySelector('.text');
const box = document.querySelector('.box');
const box2 = document.querySelector('.box2');
let dra;
drag.addEventListener('dragstart', e =>{
dra = e.target;
});
box.addEventListener('dragover', e =>{
e.preventDefault();
}, false);
box.addEventListener('drop', e =>{
e.preventDefault();
e.target.appendChild(dra);
});
box2.addEventListener('dragover', e =>{
e.preventDefault();
}, false);
box2.addEventListener('drop', e =>{
e.preventDefault();
e.target.appendChild(dra);
});