我已经用 jquery 编写了一个图像拖动和调整大小的代码。 我可以拖动图像,但我无法调整图像大小。请帮助我在调整大小时犯了什么错误。 我在下面写了我的代码。
$(document).ready(function() {
$("#action").draggable({
cursor: "move",
containment: "parent"
});
$("#action").resizable({
handlers: "all",
ghost: true
});
});
#action {
background-color: #aaa;
height: 200px;
width: 200px;
}
#limits {
background-color: lavender;
height: 300px;
width: 300px;
}
.image {
height: 200px;
width: 200px;
}
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themses/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js">
</script>
<div id="limits">
<div id="action">
<img src="http://drkeyurparmar.com/wp-content/uploads/2015/02/dummy-article-img.jpg" class="image">
</div>
</div>
最佳答案
从 jquery-ui.css 链接中的 themses 中删除 s
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Dynamically resize image</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css">
<script type="text/javascript">
$(document).ready(function() {
$("#action").draggable({
cursor: "move",
containment: "parent"
});
$(".image").resizable({
handlers: "all",
ghost: true
});
});
</script>
<style>
#action {
background-color: #aaa;
height: 200px;
width: 200px;
}
#limits {
background-color: lavender;
height: 300px;
width: 300px;
}
.image {
height: 200px;
width: 200px;
}
</style>
</head>
<body>
<div id="limits">
<div id="action" style="display:inline-block"><img src="http://www.w3schools.com/images/w3schools_green.jpg" class="image"/></div>
</div>
</body>
</html>
关于javascript - jquery 的可调整大小属性不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40213711/