javascript - Jquery-UI Draggable 导致图像缩小？

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 版本。是的，这个正在运行的片段真的很酷。很有帮助。