I'm trying to make an image draggable but whenever I resize the height and width it stops working

Question

So I'm trying to make a photobook for my class project. I want the photos to be able to be draggable and moved across the webpage. I was able to make one of my images draggable, but the image is way too large so I resized it in css.

However, whenever I resized it the draggable function stopped working. So I'm not sure what I'm doing wrong.

<body>
<div id="draggable" class="ui-widget-content">
<div id="resizeableDiv" class="ui-widget-content">

<div id="img1">
<img src="imgs/alexa.jpg">
</div>
</body>

<script>
$(function() {
$("resizableDiv").resizable();
});

$( function() {
$( "#draggable" ).draggable();
} );
</script>

Answer 1

You forgot a # in your selector, and missed some </div> tags:

<body>
<div id="draggable" class="ui-widget-content"></div>
<div id="resizeableDiv" class="ui-widget-content"></div>

<div id="img1">
<img src="imgs/alexa.jpg">
</div>
</body>

<script>
  $(function () {
      $("#resizableDiv").resizable();
  });

  $(function () {
      $("#draggable").draggable();
  });
</script>

That should do the trick.

Answer 2

Welcome to Stack Overflow.

I think you're making it more complex than is needed. I would advise the following example:

 $(function() { $(".resize").resizable({ handles: "ne, nw, se, sw", aspectRatio: true }); $(".ui-resizable-handle-se").removeClass("ui-icon ui-icon-gripsmall-diagonal-se"); $(".drag").draggable(); });

 .resize img { width: 100%; height: 100%; } .ui-resizable-handle { width: 8px; height: 8px; background: #fff; border: 1px solid #000; }

 <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"> <script src="https://code.jquery.com/jquery-1.12.4.js"></script> <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> <div id="div-1" class="drag resize edit-image ui-widget-content"> <img src="//i.imgur.com/KcxrVPk.jpg"> </div>

If you do not like the extra handles, you do not have to use them. In this example, you are dragging and resizing just one <div> element. I opted to use the class selector so that the code is a bit more portable. So you can have many images that can be dragged and resized.

You may also consider not using an <img> element inside the <div> . in this case, you would use CSS to set the background-image property to the image image in question. Something like this:

 $(function() { $(".edit-image").each(function(ind, el) { var imgSrc = $(el).data("src"); var img = $("<img>", { src: imgSrc, style: "display: none;" }).appendTo("body"); $(el).css({ "background-image": "url('" + imgSrc + "')", width: img.width(), height: img.height() }); img.remove(); }); $(".resize").resizable({ handles: "ne, nw, se, sw", aspectRatio: true, resize: function(e, ui) { var w = ui.size.width, h = ui.size.height; $(this).css("background-size", w + "px " + h + "px"); } }); $(".drag").draggable(); });

 .resize img { width: 100%; height: 100%; } .edit-image { background-repeat: no-repeat; } .ui-resizable-handle { width: 8px; height: 8px; background: #fff; border: 1px solid #000; }

 <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"> <script src="https://code.jquery.com/jquery-1.12.4.js"></script> <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> <div id="div-1" class="drag resize edit-image ui-widget-content" data-src="//i.imgur.com/KcxrVPk.jpg"> </div>

Hope that helps.