CODEWITHSUNDEEP
jqueryjquery-ui
user6145950
user6145950

Reputation:

Jquery UI use resizable and draggable at the same time

Just wanted to resize and drag an image but resizable is not working. Where is the issue ? I could not solve it.

JSFIDDLE

$(function() {
  $('#wrapper').draggable();
  $('#image').resizable();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<div id="wrapper" style="display:inline-block">
  <img id="image" src="http://www.google.com.br/images/srpr/logo3w.png" />
</div>

Upvotes: 6

Views: 1689

Answers (2)

Rion Williams
Rion Williams

Reputation: 76557

You aren't currently referencing the jQuery UI Library (both CSS and Javascript), which is the actual library that handles the draggable() and resizable() functions :

<div id="wrapper" style="display:inline-block">
  <img id="image" src="http://www.google.com.br/images/srpr/logo3w.png" />
</div>
<!-- jQuery UI CSS Reference -->
<link href="https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css" rel="stylesheet" type="text/css" />
<!-- jQuery Reference (required for jQuery UI) -->
<script src="https://code.jquery.com/jquery-1.11.3.js"></script>
<!-- jQuery UI Reference -->
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<!-- Your Script Here -->
<script>
    $(function() {
         $('#wrapper').draggable();
         $('#image').resizable();
    });
</script>

You can see a working example of this here and demonstrated below :

enter image description here

Upvotes: 1

Alex Char
Alex Char

Reputation: 33218

draggable and resizable are part of jquery-ui so you have to include it:

$(function() {
  $('#wrapper').draggable();
  $('#image').resizable();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<div id="wrapper" style="display:inline-block">
  <img id="image" src="http://www.google.com.br/images/srpr/logo3w.png" />
</div>

Upvotes: 5

Related Questions