13

私は周りを見回しましたが、これと同様の質問を見つけましたが、どれも私にとって有効な解決策はありませんでした.

これは、同様の別の質問へのリンクです。 画像のJqueryUIでのドラッグ可能およびサイズ変更可能が機能していませんか?

<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/ この例では、まったく同じ HTML と JavaScript で jfiddle を使用しています。

Jquery UI について私が見逃しているものはありますか?なぜこれは Jfiddle を介して機能するのに、上記のコード内では機能しないようです.

ありがとう。

4

3 に答える 3

50

コードに jquery-ui CSS ファイルがありません

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

デモ:プランカー

于 2013-05-22T13:33:55.913 に答える
1

完全な作業コードになります。 

</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-22T13:39:30.883 に答える
0

これはあなたのために働くでしょう。

<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-22T13:33:30.847 に答える