2013-05-22 15 views
7

Rozejrzałem się i chociaż znalazłem podobne pytania do tego, żadne z nich nie miało rozwiązań, które by mi pasowały.JQuery UI - .resizable nie działa

Oto link do innego pytania podobnego. 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> 

To tylko bardzo prosty przykład, ale gdy uruchamiam ten obraz jest ruchomy, ale nie jest skalowalny. Chociaż o ile mogę powiedzieć, to zdecydowanie powinno działać.

W powyższym linku u dołu strony znajduje się link do działającego przykładu. http://jsfiddle.net/8VY52/ Przykładem jest użycie jfiddle z tym samym kodem HTML i javascript.

Czy jest coś, czego mi brakuje o Jquery UI, dlaczego działa to przez Jfiddle, ale nie działa w powyższym kodzie.

Dzięki.

Odpowiedz

34

Brakuje plik CSS, jQuery-UI w kodzie

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

Demo: Plunker

+1

nie jest odpowiedź brakuje '/' w końcu? – luiscosta

0

To będzie działać dla Ciebie.

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

Kompletny kod roboczych będzie.

</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>