JQuery UI - .resizable不起作用

我環顧四周，儘管我發現了類似的問題，但他們都沒有任何解決方案適用於我。JQuery UI - .resizable不起作用

這是到另一個類似的問題的鏈接。 Draggable and resizable in JqueryUI for an image is not working?

<html> 
<head> 
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script> 
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script> 
</head> 
<body> 

<div id="draggableHelper" style="display:inline-block"> 
    <img id="image" src="http://www.google.com.br/images/srpr/logo3w.png" /> 
</div> 

<script type="text/javascript"> 

$(document).ready(function(){ 
$('#draggableHelper').draggable(); 
$('#image').resizable(); 

}); 
</script> 
</body> 
</html>

這只是一個非常簡單的例子，但是當我運行這個圖像是可移動的，但不改變大小。儘管據我所知，它應該肯定有效。

在上面的問題底部的鏈接中有一個鏈接到一個工作示例。 http://jsfiddle.net/8VY52/ 這個例子使用jfiddle和這個完全相同的HTML和javascript。

有沒有我缺少關於JQuery UI的問題，爲什麼通過Jfiddle工作，但似乎沒有在上面的代碼中工作。

謝謝。

來源

2013-05-22 user2307545

你缺少了jQuery UI的CSS文件中的代碼

<link rel="stylesheet" type="text/css" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css"/>

演示：Plunker

來源

2013-05-22 13:33:55

是不是你的答案缺少一個'/'到底是誰？ – luiscosta

這將爲你工作。

<div id="draggableHelper" style="display:inline-block"> 
    <div id="image"><img src="http://www.google.com.br/images/srpr/logo3w.png" /></div> 
    </div>

來源

2013-05-22 13:33:30 amit

完整的工作代碼會。

</head> 
<body> 

<div id="draggableHelper" style="display:inline-block"> 
    <div id="image"><img src="http://www.google.com.br/images/srpr/logo3w.png" /></div> 
    </div> 
<script type="text/javascript"> 

$(document).ready(function(){ 

$('#image').resizable(); 
$('#image').draggable(); 

$('#image').resize(function(){ 
    $(this).find("img").css("width","100%"); 
    $(this).find("img").css("height","100%"); 
}); 
}); 
</script> 

</body> 
</html>

來源

2013-05-22 13:39:30

JQuery UI - .resizable不起作用

回答

相關問題