Eu tenho um pequeno programa que faz o "drag & drop" mantendo os elementos originais intactos para serem usados posteriormente. São 3 divs (em cinza) que podem ser arrastados para uma outra div (em azul) e ser empilhados. Segue o código:
index.html
<link rel="stylesheet" href="style.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
<script type="text/javascript">
function drag(event) {
$(this).addClass('active');
}
function drop(event) {
var div = document.createElement('div');
var dropdiv = document.querySelector(".dropClass");
var mouseX = event.clientX - dropdiv.getBoundingClientRect().x;
var mouseY = event.clientY - dropdiv.getBoundingClientRect().y;
if ((mouseX > 0 && mouseX < (dropdiv.clientWidth-event.target.clientWidth)) && (mouseY > 0 && mouseY < (dropdiv.clientHeight-event.target.clientHeight))) {
div.id = event.target.id;
div.className = "active";
div.innerHTML = event.target.textContent;
dropdiv.appendChild(div);
}
}
</script>
<h2> Start</h2>
<div class="page">
<div class="vertical">
<div class="container" ondragstart="drag(event)" ondragend="drop(event)" draggable="true"><h3 class="text" >1</h3></div>
<div class="container" ondragstart="drag(event)" ondragend="drop(event)" draggable="true"><h3 class="text">2</h3></div>
<div class="container" ondragstart="drag(event)" ondragend="drop(event)" draggable="true"><h3 class="text">3</h3></div>
</div>
<div class="dropClass">
</div>
</div>
style.css
.page {
width: 100vw;
height: 1500px;
}
.vertical{
width: 450px;
height:700px;
background-color: white;
display: flex;
float: left;
}
.container{
margin-top: 10px;
margin-left: 10px;
width: 90px;
height: 90px;
background-color: gray;
text-align: center;
border: black;
border-color: blue;
border-width: thin;
border-style: ridge;
}
.text {
display: inline-block;
vertical-align: center;
box-sizing: content-box;
font-size: 20px;
height: auto;
margin: auto;
}
.dropClass {
float: left;
margin: 50px;
width: 550px;
height: 550px;
background-color: blue;
border-color: black;
}
.active {
font-size: 30px;
border:none;
background-color: white;
position: relative;
transform: translate(0, 0);
}
Mas eu gostaria que quando arrastar o elemento (o que fica grudado ao mouse) este ficasse com o background em branco e sem bordas (no caso aplicar a classe active), mas sem afetar o original somente a "copia" que está sendo arrastada. Há alguma maneira de se fazer isso?