Question

我环顾四周，虽然我发现了类似的问题，但没有一个解决方案对我有用。

这是另一个类似问题的链接。 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工作，但似乎不能在上面的代码中工作。

感谢。

Answer 1

您缺少代码中的jquery-ui CSS文件

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

演示：Plunker

Answer 2

完整的工作代码将是。

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

Answer 3

这对你有用。

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

JQuery UI - .resizable不起作用

3 个答案: