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, los íconos no desaparecen a la derecha. Este sitio web lo logra con lo que parece ser "traducir", pero no estoy seguro de cómo.
Lo que he logrado hasta ahora es mantener los íconos a la vista al establecer su posición usando %. Pero tan pronto como se arrastra el ícono, esta posición ya no se aplica y si cambia el tamaño del navegador, el ícono permanece donde lo dejó y desaparecerá de la pantalla.
Vea el siguiente ejemplo, cargue el fragmento y visualícelo en pantalla completa, luego cambie el tamaño del navegador 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(); }); .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>Puede usar la opción "contención: "ventana"" y una función auxiliar.
$(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>