响应式调整大小的 jQuery

Question

响应式调整大小的 jQuery

5

你好，我在使用jQuery进行响应式缩放时遇到了问题。我有动态的div，希望将它们移动到另一个div中。当屏幕尺寸发生变化时，我的divs宽度、高度和位置保持不变。如何解决这个问题？我希望在屏幕大小发生变化时，divs的大小也随之改变并保持原来的位置。我考虑使用$(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 -->

这里有一个问题：

- user9438961

你能否创建一个 jsfiddle？ - SRK

@SmitRaval 这是链接 https://jsfiddle.net/cristiannn/ztf7pry6/38/ - user9438961

2个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- SRK · Answer 1

你可以像这样做。

$(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'});
});

将位置转换为百分比，用于“STOP”事件。这里有一个jsfiddle。

- Kristianmitk · Answer 2

这里提供一种使用$(window).resize()的解决方案。

在回调函数中检查宽度/高度是否已更改，并根据更改调整.box元素的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>