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

演示：Plunker

于 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 回答