0

i use bootstrap, and when i drag some element, this is out of responsibility, this means when you re-size browser that element has been dragged is not responsive.

jsfiddle

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

how can resolve this problem with bootstrap classes or @media-query?

4

2 回答 2

1

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

于 2013-07-16T17:41:05.587 回答
0

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

$(function() {
      $(window).resize(function() {
           $( ".drag" ).draggable({ 
             containment : '#container',
             tolerance: 'touch',
           }); 
      }).resize();
});
于 2013-07-16T17:38:18.267 回答