Estoy tratando de implementar un simple arrastrar y soltar, pero por alguna razón los datos que estoy almacenando en el objeto dataTransfer no se retienen. Aquí está mi código:
function drag(ev) { var checker_id = ev.target.id; var checker_slot = ev.target.getAttribute('data-slot'); console.log(`Starting drag with ${checker_id} from slot ${checker_slot}`); ev.originalEvent.dataTransfer.setData("checker-id", ev.target.id); ev.originalEvent.dataTransfer.setData("checker-slot", ev.target.getAttribute('data-slot')); var stored_id = ev.originalEvent.dataTransfer.getData("checker-id"); var stored_slot = ev.originalEvent.dataTransfer.getData("checker-slot"); console.log(`Just stored checker ${stored_id} from slot ${stored_slot}`); } function drag_over(ev) { console.log(`Drag_over event data: ${ev.originalEvent.dataTransfer.types}`); var checker_id = ev.originalEvent.dataTransfer.getData("checker-id"); var checker_slot = ev.originalEvent.dataTransfer.getData("checker-slot"); console.log(`Drag_over with checker ${checker_id} from slot ${checker_slot}`); } $("#checker-1").on('dragstart', drag); $("#slot-2").on('dragover', drag_over); .slot { width: 100px; height: 100px; margin: 100px; border: 2px solid black; } .checker { width: 50px; height: 50px; background: blue; } <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <script src="https://code.jquery.com/ui/1.13.0/jquery-ui.min.js" integrity="sha256-hlKLmzaRlE8SCJC1Kw8zoUbU8BxA+8kR3gseuKfMjxA=" crossorigin="anonymous"></script> <div class="slot" id="slot-1"> <div class="checker" id="checker-1" data-slot="slot-1" draggable="true"> </div> <div class="slot" id="slot-2"></div>Espero que la salida a la consola sea la siguiente:
En cambio, la última declaración de registro es:
Por alguna razón, retiene las claves que almaceno en el objeto DataTransfer pero no los valores. No puedo entender lo que estoy haciendo mal.
Noté que te faltaba una etiqueta de cierre DIV. Este código corregido parece funcionar:
function drag(ev) { var checker_id = ev.target.id; var checker_slot = ev.target.getAttribute('data-slot'); console.log(`Starting drag with ${checker_id} from slot ${checker_slot}`); ev.originalEvent.dataTransfer.setData("checker-id", ev.target.id); ev.originalEvent.dataTransfer.setData("checker-slot", ev.target.getAttribute('data-slot')); var stored_id = ev.originalEvent.dataTransfer.getData("checker-id"); var stored_slot = ev.originalEvent.dataTransfer.getData("checker-slot"); console.log(`Just stored checker ${stored_id} from slot ${stored_slot}`); } function drag_over(ev) { console.log(`Drag_over event data: ${ev.originalEvent.dataTransfer.types}`); var checker_id = ev.originalEvent.dataTransfer.getData("checker-id"); var checker_slot = ev.originalEvent.dataTransfer.getData("checker-slot"); console.log(`Drag_over with checker ${checker_id} from slot ${checker_slot}`); } $("#checker-1").on('dragstart', drag); $("#slot-2").on('dragover', drag_over); .slot { width: 100px; height: 100px; margin: 100px; border: 2px solid black; } .checker { width: 50px; height: 50px; background: blue; } <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <script src="https://code.jquery.com/ui/1.13.0/jquery-ui.min.js" integrity="sha256-hlKLmzaRlE8SCJC1Kw8zoUbU8BxA+8kR3gseuKfMjxA=" crossorigin="anonymous"></script> <div class="slot" id="slot-1"> <div class="checker" id="checker-1" data-slot="slot-1" draggable="true"> </div> </div> <div class="slot" id="slot-2"></div>También puede considerar lo siguiente.
$(function() { $(".checker").draggable(); $(".slot").droppable({ accept: ".checker", drop: function(event, ui) { ui.draggable.appendTo(this).attr("style", ""); console.log("Got " + ui.draggable.attr("id")); } }); }); .slot { width: 100px; height: 100px; margin: 100px; border: 2px solid black; } .checker { width: 50px; height: 50px; background: blue; } <link rel="stylesheet" href="//code.jquery.com/ui/1.13.0/themes/base/jquery-ui.css"> <script src="https://code.jquery.com/jquery-3.6.0.js"></script> <script src="https://code.jquery.com/ui/1.13.0/jquery-ui.js"></script> <div class="slot" id="slot-1"> <div class="checker" id="checker-1" data-slot="slot-1" draggable="true"> </div> </div> <div class="slot" id="slot-2"></div>