サイズ変更可能な属性は

私は画像のドラッグのためのコードを書かれている作業と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>

出典

2016-10-24 vikrant

jqueryの-ui.cssリンクにおけるthemses

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

出典

2016-10-24 08:26:10 Mahi

次これはカーネルアローラの答えをしてみてください – vikrant

起こるworking.sameものではありません。 – Mahi

また動作していません – vikrant

代わりのdiv IDテイク画像IDを撮影から削除S。

HTML

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

idを持つ要素を取ります。道

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

出典

2016-10-24 08:27:27

これは動作していません。同じことが起こります – vikrant

サイズ変更可能な属性は

答えて

関連する問題