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 - 元素left / width和top / height属性变化。

$(window).resize()的回调主体包含在setTimeout(...)中，以避免每次触发事件时都执行代码 - 导致不准确的更改。

＆＃13;

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 2

你可以这样做。

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

在停止事件中将位置转换为百分比。这是jsfiddle

响应大小调整jQuery

2 个答案: