Responsive jQuery Size

Question

Hey. I have a problem with flexible resizing in jQuery. I have dynamic divs that I want to move to another div. When the screen size changes, I have the same width, height and position for my divs. How can i fix this? I want when the screen size changes, the size of the divs is also with the same position. I was thinking about $ (window) .resize (function () {}); but how can I do this, can someone help me with this?

$('.box').each(function() { $('.box').draggable({containment: '#boxid'});}); $('.box').each(function() { $('.box').resizable();}); 

 #boxid { height: 750px; border: 5px dotted #292929; } .box { background:rgb(107, 193, 243); cursor:move; position:absolute; } 

 <link rel="stylesheet" type="text/css" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"> <script src="https://code.jquery.com/jquery-1.12.4.js"></script> <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> <div class="row"> <div id="boxid" class="col-xs-12"> <!-- hier die Position änder --> </div> </div> <!--here I start the foreach --> <div id="id" class="box" style="top:50px; left:50px; width:50px; height:50px;"> <p id="top"></p> <p id="left"></p> <p id="height"></p> <p id="width"></p> </div> <div id="id" class="box" style="top:50px; left:50px; width:50px; height:50px;"> <p id="top"></p> <p id="left"></p> <p id="height"></p> <p id="width"></p> </div> <!--here I end the foreach --> 

Here is the problem:

Answer 1

Here's a solution using $(window).resize() .

As part of checking the callback to see if the width / height has changed and adjusted the .box -elements left / width and top / height properties to suit the changes.

The body of the $(window).resize() wrapped in setTimeout(...) to avoid executing code every time the event is $(window).resize() - leads to inaccurate changes.

 $('.box').each(function() { $('.box').draggable({containment: '#boxid'});}); $('.box').each(function() { $('.box').resizable();}); let boxH = $("#boxid").height(), boxW = $("#boxid").width(), doit; $(window).on('resize', function() { clearTimeout(doit); doit = setTimeout(function() { let box = $("#boxid"), newH = box.height(), newW = box.width(); if (newH != boxH) { $('.box').each(function() { let prop = newH / boxH, self = $(this), sT = Number(self.css('top').slice(0,-2)), sH = Number(self.css('height').slice(0,-2)); self.css({'top': sT * prop}); self.css({'height': sH * prop}); console.log("TOP/LEFT", self.css('top'), self.css('left')); }); } if (newW != boxW) { $('.box').each(function() { let prop = newW / boxW, self = $(this), sL = Number(self.css('left').slice(0,-2)), sW = Number(self.css('width').slice(0,-2)); self.css({'left': sL * prop}); self.css({'width': sW * prop}); console.log("TOP/LEFT", self.css('top'), self.css('left')); }); } boxH = newH; boxW = newW; }, 300); }); 

 #boxid { height: 750px; width: 50%; margin: 0 auto; border: 5px dotted #292929; } .box { background:rgb(107, 193, 243); cursor:move; position:absolute; } 

 <link rel="stylesheet" type="text/css" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"> <script src="https://code.jquery.com/jquery-1.12.4.js"></script> <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> <div class="row"> <div id="boxid" class="col-xs-12"> <div id="id1" class="box" style="top:50px; left:50px; width:50px; height:50px;"> <p id="top"></p> <p id="left"></p> <p id="height"></p> <p id="width"></p> </div> <div id="id2" class="box" style="top:50px; left:50px; width:50px; height:50px;"> <p id="top"></p> <p id="left"></p> <p id="height"></p> <p id="width"></p> </div> </div> </div> 

Answer 2

You can do something like this.

 $(document).ready(function() { $.ui.intersect = function () { return true; }; $('.box').each(function() { $('.box').resizable(); }); $('.box').each(function() { $(".box").draggable({ revert: 'valid', containment: '#lager', drag: function() { var top = $(this).offset().top; var left = $(this).offset().left; $("#top").html(top); $("#left").html(left); }, stop: function(e, ui) { var perc = ui.position.left / ui.helper.parent().width() * 100; ui.helper.css('left', perc + '%'); } }); }); $('.box').droppable({ tolerance: 'touch'}); }); 

Convert position to percentage on STOP event. Here is jsfiddle