javascript - 响应式调整大小 jQuery

Question

您好，我在 jQuery 中遇到响应式调整大小的问题。我有动态 div，我想移动到另一个 div。当屏幕尺寸改变时，我的 div 具有相同的宽度、高度和位置。我该如何解决？我想，当屏幕尺寸发生变化时，div 尺寸也具有相同的位置。我在考虑 $(window).resize(function(){});，但我该怎么做，有人可以帮我吗？

$('.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 -->

问题是:

Answer 1

这里是使用 $(window).resize() 的解决方案。

在回调中检查宽度/高度是否已更改并调整 .box-elements left/width 和 top /height 属性根据变化。

$(window).resize() 的回调主体被包裹在 setTimeout(...) 中以避免每次触发事件时都执行代码- 导致不精确的变化。

$('.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>