Im working on a website that behaves like a desktop where users can drag icons round the screen within a container and then click them to open windows. The issue im having is keeping the icons in view at all times so if a user decreases the browser size, the icons dont disappear off to the right. This website achieves it with what seems to be "translate" but im not sure how?
What ive acheived so far is keeping the icons in view by setting their position using %. But as soon as the icon is dragged this position is no long applied and if you resize the browser the icon stays where you left it and will disappear off screen.
See the below example, load the snippet and view it fullscreen, then resize the browser and the text stays in view at all times. But once you move the text then resize the browser it stays where it is rather than moving with the browser.
$(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>You can use "containment: "window"" option and a helper function.
$(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>