Como puedo identificar que tarjeta esta en que div
pueden ejecutar el codigo para ver mi resultado. Necesito que al mover una tarjeta me identifique en que div
se encuentra ya sea en el primero o el segundo.
var dropTarget = document.querySelector(".wrapper");
var draggables = document.querySelectorAll(".task");
for(let i = 0; i < draggables.length; i++) {
draggables[i].addEventListener("dragstart", function (ev) {
ev.dataTransfer.setData("srcId", ev.target.id);
});
}
dropTarget.addEventListener('dragover', function(ev) {
ev.preventDefault();
});
dropTarget.addEventListener('drop', function(ev) {
ev.preventDefault();
let target = ev.target;
let droppable = target.classList.contains('box');
let srcId = ev.dataTransfer.getData("srcId");
if (droppable) {
ev.target.appendChild(document.getElementById(srcId));
}
});
.wrapper {
display: grid;
grid-template-columns: 1fr 1fr;
grid-gap: 10px;
background-color: #fff;
color: #444;
}
.box {
background-color: #444;
color: #fff;
border-radius: 5px;
padding: 20px;
font-size: 150%;
height: 90vh;
}
.task {
background-color: pink;
color: black;
padding: 5px;
margin: 4px;
}
<div class="main">
<div class="col-xs-4">
<div class="wrapper">
<div class="box">
<div id="task1" class="task" draggable="true">
arrastrame
</div>
<div id="task2" class="task" draggable="true">
arrastrame
</div>
<div id="task3" class="task" draggable="true">
arrastrame
</div>
</div>
<div class="box">
</div>
</div>
</div>