Estoy trabajando en un sitio web que se comporta como un escritorio donde los usuarios pueden arrastrar íconos por la pantalla dentro de un contenedor y luego hacer clic en ellos para abrir ventanas. El problema que tengo es mantener los íconos a la vista en todo momento, de modo que si un usuario reduce el tamaño del navegador verticalmente, los íconos no desaparecen de la parte inferior.
Lo tengo funcionando horizontalmente, por lo que si se reduce el ancho del navegador, los íconos se moverán con la ventana y permanecerán a la vista, pero no puedo hacerlo funcionar verticalmente si se ajusta la altura del navegador (una vez que se ha arrastrado un ícono)
Vea el siguiente ejemplo, cargue el fragmento y visualícelo en pantalla completa, luego cambie el tamaño del navegador verticalmente y el texto permanece visible en todo momento. Pero una vez que mueve el texto, cambia el tamaño del navegador, permanece donde está en lugar de moverse con el navegador.
$(function() { $(".drag-me").draggable({ containment: "window", stop: function(e, ui) { var perc = ui.position.left / ui.helper.parent().width() * 100; ui.helper.css('left', perc + '%'); } }); }); .drag-me { font-family: 'Lato', sans-serif; font-weight: 300; font-size: 16px; line-height: 16px; position: absolute; cursor: pointer; top: 20% ; left: 50% ; width:50px; } <script src="//code.jquery.com/jquery-1.10.2.js"></script> <script src="//code.jquery.com/ui/1.11.2/jquery-ui.js"></script> <div class="drag-me"> <span>Drag me around!</span> </div>debe hacerlo en el evento de cambio de tamaño de ventana
Creo que eso es lo que necesitas:
$(function() { $(window).on("resize", function(){ if($(".drag-me").offset().top + $(".drag-me").height() >= $(window).height()){ var topPos = $(window).height() - $(".drag-me").height(); $(".drag-me").css({'top': topPos + 'px'}); } }); $(".drag-me").draggable({ containment: "window", stop: function(e, ui) { var perc = ui.position.left / ui.helper.parent().width() * 100; ui.helper.css({'left': perc + '%'}); } }); });