0

私はブートストラップを使用していますが、いくつかの要素をドラッグすると、これは責任がありません。これは、要素がドラッグされたブラウザのサイズを変更すると、応答しないことを意味します。

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>

ブートストラップ クラスまたは @media-query を使用してこの問題を解決するにはどうすればよいですか?

4

2 に答える 2