JQuery UI -.resizable 不工作
[英]JQuery UI - .resizable not working
问题描述
I have looked around and although I have found similar questions to this one, none of them had any solutions that worked for me.
我环顾四周，虽然我发现了与这个类似的问题，但没有一个有适合我的解决方案。
Here is a link to another question similar.这是另一个类似问题的链接。 Draggable and resizable in JqueryUI for an image is not working? 图像的 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>
This is just a very basic example but when I run this the image is movable but is not resizable.这只是一个非常基本的示例，但是当我运行它时，图像是可移动的，但不能调整大小。 Although as far as I can tell, it should definitely work.尽管据我所知，它应该绝对有效。
In the link above at the bottom of the question there is a link to a working example.在问题底部的上方链接中，有一个指向工作示例的链接。 http://jsfiddle.net/8VY52/ The example is using jfiddle with this exact same HTML and javascript. http://jsfiddle.net/8VY52/该示例将 jfiddle 与完全相同的 HTML 和 javascript 一起使用。
Is there something I am missing about Jquery UI, why does this work through Jfiddle but does not seem to work within the code above.关于 Jquery UI，我是否遗漏了什么，为什么这可以通过 Jfiddle 工作，但在上面的代码中似乎不起作用。
Thanks.谢谢。
4 个解决方案
解决方案1
41 已采纳 2013-05-22 13:33:55
解决方案2
1 2013-05-22 13:39:30
Complete working code would be. 完整的工作代码将是。
</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>
解决方案3
0 2013-05-22 13:33:30
This will work for you. 这对你有用。
<div id="draggableHelper" style="display:inline-block">
<div id="image"><img src="http://www.google.com.br/images/srpr/logo3w.png" /></div>
</div>
解决方案4
0 2023-01-19 17:48:54
As the resizable property only works on right side and bottom side so find the image borders find that by selecting a image in css and border to it then see the output it will work perfectly由于可调整大小的属性仅适用于右侧和底部，因此找到图像边框发现通过选择 css 中的图像并为其添加边框然后看到 output 它将完美工作
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.