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 vertically, the icons dont disappear off the bottom.
Ive got it working horizontally so if the browser width is reduced the icons will move with the window and stay in view, but I cant get it working vertically if the height of the browser is adjusted (once an icon has been dragged)
See the below example, load the snippet and view it fullscreen, then resize the browser vertically 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({
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>you need to do it on window resize event
I think that's what you need:
$(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 + '%'});
}
});
});