Eu resolvi criar uma aplicação WEB usando interação com o usuário usando a API Drag And Drop (Arrastar e soltar) do JavaScript.
<html>
<head>
<meta charset="UTF-8">
<style>
body {
margin: 0;
}
* {
margin: 0;
}
#drag {
width: 100px;
height: 100px;
background: rgb(110, 107, 107);
position: relative;
}
#drop {
width: 200px;
height: 200px;
background: rgb(177, 174, 174);
position: absolute;
top: 0;
left: 200px;
}
.paragraph {
position: absolute;
left: 50%;
top: 50%;
transform: translateX(-50%) translateY(-50%);
font-family: Arial, Helvetica, sans-serif;
font-size: 20px;
color: rgb(255, 255, 255);
}
</style>
</head>
<body>
<div id="drag" draggable="true"><p class="paragraph">Arraste</p></div>
<div id="drop"><p class="paragraph">Solte</p></div>
<script>
let drag = window.document.querySelector("#drag");
let drop = window.document.querySelector("#drop");
drag.addEventListener("dragstart", function (event)
{
event.dataTransfer.setData("text", event.target.id);
});
drop.addEventListener("dragover", function (event)
{
event.preventDefault();
drop.style.border = "5px dotted rgb(120, 120, 120)";
});
drop.addEventListener("dragleave", function (event)
{
drop.style.border = "none";
});
drop.addEventListener("drop", function (event)
{
event.preventDefault();
let data = event.dataTransfer.getData("text");
event.target.appendChild(window.document.getElementById(data));
drop.style.border = "none";
});
</script>
</body>
</html>
Esse código em cima é só um pequeno pedaço da aplicação que eu estou criando só coloquei o código necessário para não ficar muito grande o código, e vocês não perderem tempo visualizando o código por inteiro. Mas o meu problema é o seguinte o Drag And Drop do código acima funciona normalmente, porém quando você arrasta(drag) a div com id="drag"
e solta(drop) ela na div
com id="drop"
a div#drag
fica dentro da div#drop
em uma posição left: 0
e top: 0
em relação ao seu container pai. O que eu gostaria era que na hora de arrastar a div#drag
e soltar ela dentro da div#drop
não importa aonde você está soltando a div#drag
ela permanecerá na posição em que você soltou dentro da div#drop
. Aqui eu citei alguns sites que usam o Drag And Drop
em que o mesmo efeito que eu gostaria que acontecesse com a minha aplicação. Material Angular, Scratch.