Question

我使用bootstrap，当我拖动一些元素时，这是没有责任的，这意味着当您重新调整浏览器时，拖动的元素没有响应。

<!DOCTYPE >

 <head>
 <style>
  #container {
    position:relative;
    background-color:#f5af69;
    border:1px solid #643506;
    height:400px;
  }

 .item {
    position:absolute;
    width:25px;
    height:25px;
    background-color:#ffef2d;
    border:1px solid red;
    text-align:center;
    line-height:25px;
  }

  #div1 {
    left:10%;
    top:10%;
  }

  #div2 {
    left:35%;
    top:80%;
    }

    #div3 {
      left:75%;
      top:30%;
    }

    #div4 {
      left:50%;
      top:50%;
    }

    .hover {
      opacity:0.4;
    }

    .active {
      background-color:#fa58fe;
    }

    #line {
      width:100%;
      height:3px;
      background-color:#342903;
      top:50%;
      position:absolute;
    }

    #line2 {
      width:3px;
      height:100%;
      background-color:#342903;
      left:50%;
      position:absolute;
    }


    </style>
  </head>



  <body>
    <div id="container" class="container-container-fluid">
      <div class="row-fluid">
        <div id="main" class="span5">
          <div id="div1" class="item drag drop">1</div>

          <div id="div2" class="item drag drop">2</div>

          <div id="line"></div>

          <div id="line2"></div>

          <div id="div3" class="item drag drop">3</div>

          <div id="div4" class="item drag drop">4</div>
        </div>
      </div>
    </div>

    <div id="test"></div>
    </body>


   <script type="text/javascript" language="javascript">
    $(function() {
          $( ".drag" ).draggable({ 
            containment : '#container',
            tolerance: 'touch',
          });   
    });

    </script>

如何使用bootstrap类或@ media-query解决此问题？

Answer 1

我认为您最初为#divs左侧和顶部设置的百分比在被拖动后会变为像素 - 因此它们不再响应响应。

Answer 2

尝试调用每个窗口调整大小：

$(function() {
      $(window).resize(function() {
           $( ".drag" ).draggable({ 
             containment : '#container',
             tolerance: 'touch',
           }); 
      }).resize();
});

为什么<div>被拖动后没有响应？</div>

2 个答案: