Question

我正在使用Bootstrap 3 Modal并将图像放入class="modal-body"。我正在使用 Jquery-UI 使图像可拖动。现在在拖动图像时，它的尺寸会缩小。但只有当我选择id ="frame_type"的选择框中的“黑色”选项并拖动时才会发生缩小。

$(document).ready(function(){
  $('#frame_type').on("change", function(){
    if($(this).val() == "black"){
      $('#image').removeAttr('style');
      $("#image").css("border", "20px solid black");
    }		
    else{
      $('#image').removeAttr('style');
    }
  });
  $("#image").draggable();
});

img{
  position:fixed;
  top:22%;
  left:22%;
  width:55%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
<div class="modal-body">
  <label for = "frame_type" class="s_f">Select Frame:</label> 		
  <select id = "frame_type">
    <option value="noframe" selected="selected">No Frame</option>
    <option value="black">Black</option>
  </select> 
  <img id="image" src = "http://placehold.it/350x250/0033FF/FFFFFF/&text=Test" >
</div>

如何阻止萎缩？

Answer 1

使用Jquery CDN它并没有缩小。所以Jquery.js存在一些问题。我使用的是1.7版本。这个运行片段真的很酷。非常有帮助。

Jquery-UI Draggable导致图像缩小？

1 个答案: