Me gustaría alimentar a un gato con hamburguesas. Si agarras una hamburguesa y la llevas a la boca del gato, la hamburguesa debería desaparecer.
Actualmente se ve así:
$(function() { $(".burger").draggable(); }); $(".burger").on("click touchend", function() { $(this).css("display", "none"); }); * { font-size: 50px; } img { width: 200px; } .burger { cursor: grab; display: inline-block; } <script src="https://code.jquery.com/jquery-3.6.0.js"></script> <script src="https://code.jquery.com/ui/1.13.1/jquery-ui.js"></script> <img src="https://upload.wikimedia.org/wikipedia/commons/f/f8/Manul_kitten.jpg"> <div class="burger">🍔</div> <div class="burger">🍔</div> <div class="burger">🍔</div>¿Cómo puedo dejar que funcione que la hamburguesa solo desaparezca cerca de la boca del gato?
cree un elemento oculto sobre la imagen y configúrelo como desplegable.
$(function() { $(".burger").draggable({ revert: "invalid" }); }); $(".droppable").droppable({ drop: function(event, ui) { ui.draggable.remove(); } }); * { font-size: 50px; } img { width: 200px; } .burger { cursor: grab; display: inline-block; } .wrap { position: relative } .droppable { position: absolute; top: 34px; left: 125px; display: block; width: 40px; height: 40px; border: 2px solid yellow; /*remove to hide*/ } <script src="https://code.jquery.com/jquery-3.6.0.js"></script> <script src="https://code.jquery.com/ui/1.13.1/jquery-ui.js"></script> <div class="wrap"> <div class="droppable"></div> <img src="https://upload.wikimedia.org/wikipedia/commons/f/f8/Manul_kitten.jpg"> </div> <div class="burger">🍔</div> <div class="burger">🍔</div> <div class="burger">🍔</div>