Блог

Главная - Вопросы по программированию - атрибут jquery с возможностью изменения размера не работает

атрибут jquery с возможностью изменения размера не работает

#javascript #jquery #html #css

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

Ответ №1:

удалите s из тем в jquery-ссылка ui.css 

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

Комментарии:

1. попробуйте ответить на kernal arora.

2. @vikrant я обновил свой ответ, поскольку вы добавили неверный файл jquery scrpt.

3. @vikrant code.jquery.com/ui/1.10.3/themses/smoothness/jquery-ui.css ничего не включать

4. @vikrant но как перетаскиваемый работал, даже если был написан неправильный скрипт?

Ответ №2:

Вместо div идентификатора возьмите идентификатор изображения.

HTML

  <div id="limits">
            <div id="action"><img id="idDragImage" src="/home/cp/Desktop/jquery/index.jpeg" class="image"></div>
 </div>

Возьмите элемент с идентификатором. следующий способ

JS

  $(document).ready(function() {
            $("#idDragImage").draggable({cursor:"move",containment:"parent"});
            $("#idDragImage").resizable({handlers: "all",ghost:true});
        });