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










0















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>









share|improve this question


























    0















    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>









    share|improve this question
























      0












      0








      0








      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>









      share|improve this 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>






      jquery css jquery-ui draggable jquery-ui-draggable






      share|improve this question













      share|improve this question











      share|improve this question




      share|improve this question










      asked Nov 14 '18 at 17:52









      Tracy FernandezTracy Fernandez

      32




      32






















          2 Answers
          2






          active

          oldest

          votes


















          0














          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.






          share|improve this answer






























            2














            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.






            share|improve this answer
























              Your Answer






              StackExchange.ifUsing("editor", function ()
              StackExchange.using("externalEditor", function ()
              StackExchange.using("snippets", function ()
              StackExchange.snippets.init();
              );
              );
              , "code-snippets");

              StackExchange.ready(function()
              var channelOptions =
              tags: "".split(" "),
              id: "1"
              ;
              initTagRenderer("".split(" "), "".split(" "), channelOptions);

              StackExchange.using("externalEditor", function()
              // Have to fire editor after snippets, if snippets enabled
              if (StackExchange.settings.snippets.snippetsEnabled)
              StackExchange.using("snippets", function()
              createEditor();
              );

              else
              createEditor();

              );

              function createEditor()
              StackExchange.prepareEditor(
              heartbeatType: 'answer',
              autoActivateHeartbeat: false,
              convertImagesToLinks: true,
              noModals: true,
              showLowRepImageUploadWarning: true,
              reputationToPostImages: 10,
              bindNavPrevention: true,
              postfix: "",
              imageUploader:
              brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
              contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
              allowUrls: true
              ,
              onDemand: true,
              discardSelector: ".discard-answer"
              ,immediatelyShowMarkdownHelp:true
              );



              );













              draft saved

              draft discarded


















              StackExchange.ready(
              function ()
              StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53306118%2fim-trying-to-make-an-image-draggable-but-whenever-i-resize-the-height-and-width%23new-answer', 'question_page');

              );

              Post as a guest















              Required, but never shown

























              2 Answers
              2






              active

              oldest

              votes








              2 Answers
              2






              active

              oldest

              votes









              active

              oldest

              votes






              active

              oldest

              votes









              0














              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.






              share|improve this answer



























                0














                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.






                share|improve this answer

























                  0












                  0








                  0







                  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.






                  share|improve this answer













                  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.






                  $(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>





                  $(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>





                  $(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>





                  $(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>






                  share|improve this answer












                  share|improve this answer



                  share|improve this answer










                  answered Nov 14 '18 at 21:03









                  TwistyTwisty

                  14.1k11534




                  14.1k11534























                      2














                      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.






                      share|improve this answer





























                        2














                        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.






                        share|improve this answer



























                          2












                          2








                          2







                          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.






                          share|improve this answer















                          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.







                          share|improve this answer














                          share|improve this answer



                          share|improve this answer








                          edited Nov 14 '18 at 20:47









                          Love Buddha

                          907




                          907










                          answered Nov 14 '18 at 17:59









                          Peter McLaughlinPeter McLaughlin

                          514




                          514



























                              draft saved

                              draft discarded
















































                              Thanks for contributing an answer to Stack Overflow!


                              • Please be sure to answer the question. Provide details and share your research!

                              But avoid


                              • Asking for help, clarification, or responding to other answers.

                              • Making statements based on opinion; back them up with references or personal experience.

                              To learn more, see our tips on writing great answers.




                              draft saved


                              draft discarded














                              StackExchange.ready(
                              function ()
                              StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53306118%2fim-trying-to-make-an-image-draggable-but-whenever-i-resize-the-height-and-width%23new-answer', 'question_page');

                              );

                              Post as a guest















                              Required, but never shown





















































                              Required, but never shown














                              Required, but never shown












                              Required, but never shown







                              Required, but never shown

































                              Required, but never shown














                              Required, but never shown












                              Required, but never shown







                              Required, but never shown







                              Popular posts from this blog

                              Top Tejano songwriter Luis Silva dead of heart attack at 64

                              ReactJS Fetched API data displays live - need Data displayed static

                              Evgeni Malkin