javascript - jquery 的可调整大小属性不起作用

标签 javascript jquery html css

我已经用 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/

相关文章:

javascript - VueJS + Canvas-Context 如何链接在一起?

php - 连接到远程计算机 - 桌面

javascript - 如何检查某个html片段是否已经加载?

javascript - jQuery - 将 .live 转换为 .on click

javascript - 如何使用 Jquery 从 Asp.net MVC 中的 CheckBox 中获取选定的值?

javascript - 防止固定 Div 覆盖其他 Div

javascript正则表达式从路径字符串中替换3digitis

html - 对齐 flex 容器内的 <hr> 元素

javascript - 尝试实现一个有问题的简单响应式进度条

javascript - 将 HTML 文件转换为 PDF