0

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>

1 respuesta 1

0

Lo más sencillo probablmente sea asignar un identificador a cada uno de lox boxes, y mediante parentNode obtener su id.

El .task concreto que estás moviendo puedes obtenerlo también del evento.

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);
     console.log(ev.target.parentNode.id)
     console.log(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 id="org-box" 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 id="target-box" class="box">
            </div>
    </div>
</div>

Otra opción sería que en lugar de poner un listener a cada .task se lo pusieras únicamente a los .box. De este modo evt.target sería el elemento del dom sobre el que se inicia el evento y evt.currentTarget sería el elemento .box al que añadiste el listener.

4
  • En la consola me muestra a que div fue pero no que tarjeta es la que se ha movido, me ayudas con eso?
    – DoubleM
    el 27 may. 2018 a las 16:50
  • Cambiado. Por tu pregunta entendía que querías saber cual era el .box no el .task. Recuerda marcar la pregunta como aceptada si tu duda está resuelta. el 27 may. 2018 a las 21:28
  • Uncaught TypeError: Failed to execute 'appendChild' on 'Node': parameter 1 is not of type 'Node'. at HTMLDivElement.<anonymous> (ordenes:299)
    – DoubleM
    el 27 may. 2018 a las 22:36
  • El código que te posteo no da ese error. Supongo que habrás cambiado algo, si no tiene relación con esta pregunta abre otra. Si lo tiene actualiza la pregunta el 28 may. 2018 a las 9:26

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.