2014-10-22 64 views
0

我正在使用Bootstrap 3 Modal並在class="modal-body"中放置圖像。我通過使用Jquery-UI使圖像可拖動。現在拖動圖像的尺寸縮小。但是隻有當我在選擇框中選擇「黑色」選項並且拖動時纔會收縮。Jquery-UI Draggable導致圖像縮小?

$(document).ready(function(){ 
 
    $('#frame_type').on("change", function(){ 
 
    if($(this).val() == "black"){ 
 
     $('#image').removeAttr('style'); 
 
     $("#image").css("border", "20px solid black"); 
 
    } \t \t 
 
    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> \t \t 
 
    <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>

我怎麼能阻止萎縮?

+2

具有諷刺意味的是,堆棧片段不顯示此行爲... – MarioDS 2014-10-22 11:30:02

+0

我在別的地方然後 – Coderaemon 2014-10-22 11:31:41

+0

也許bootstrap導致問題 – Coderaemon 2014-10-22 11:34:01

回答

0

使用Jquery CDN它不會縮小。所以Jquery.js有一些問題。我使用的是1.7版本。 真的很酷功能這個運行的代碼片段。很有幫助。