jQuery resizable() image working in draggable() div

Question

currently i have image upload form in which we can upload multiple image and drag this image inside the div .

Please see my form

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

<input   name="user_file[]" id="user_file" style="position: relative;overflow: hidden" multiple="" type="file">

 <div class="new-multiple"></div>




 $( function() {

        var inputLocalFont = document.getElementById("user_file");
        inputLocalFont.addEventListener("change",previewImages,false);

        function previewImages(){
            var fileList = this.files;

            var anyWindow = window.URL || window.webkitURL;

                for(var i = 0; i < fileList.length; i++){
                  var objectUrl = anyWindow.createObjectURL(fileList[i]);
                  $('.new-multiple').append('<div class="img-div"><img src="' + objectUrl + '" class="newly-added" /></div>');
                  window.URL.revokeObjectURL(fileList[i]);
                }

               $( ".img-div" ).draggable();
              $( ".newly-added" ).resizble();
              } 
});

Here i when i upload images it will show on new-multiple div . Also i can drag these images.

js fidle: https://jsfiddle.net/vd11qyzv/1/

But resizble is not working . Please help .

Answer 1

First:

$( ".newly-added" ).resizble();

This will fail and you will see:

TypeError: $(...).resizble is not a function

This is fixed by using the proper function name:

$( ".newly-added" ).resizable();

Second, there is a lot you can do to clean up and improve your code.

JavaScript

$(function() {
  var inputLocalFont = $("#user_file");
  inputLocalFont.change(previewImages);

  function previewImages(e) {
    var fileList = this.files;

    var anyWindow = window.URL || window.webkitURL;

    $.each(fileList, function(key, val) {
      var objectUrl = anyWindow.createObjectURL(val);
      var $newDiv = $("<div>", {
          id: "img-div-" + key,
          class: "img-div"
        })
        .draggable()
        .appendTo($('.new-multiple'));
      var $newImg = $("<img>", {
          src: objectUrl,
          id: "img-" + key,
          class: "newly-added"
        })
        .resizable()
        .appendTo($newDiv);
      window.URL.revokeObjectURL(val);
    });
  }
});

Running this test code (https://jsfiddle.net/Twisty/vd11qyzv/2/), you ge the following HTML output:

<div class="new-multiple">
  <div id="img-div-0" class="img-div ui-draggable ui-draggable-handle" style="position: relative;">
    <img src="blob:https://fiddle.jshell.net/d2298075-5b2a-47b5-ac71-cc6c07bb1133" id="img-0" class="newly-added ui-resizable" style="margin: 0px; resize: none; position: static; display: block; height: 0px; width: 0px;">
  </div>
</div>

You can see draggable and resizable are both defined for their respective elements.

UPDATE

Found a minor issue in the assignment. Swap .resizable() and .appendTo() as resizable appears to have an issue with being assigned before being appended.

Working example: https://jsfiddle.net/Twisty/vd11qyzv/3/

I also added a bit of styling to help ensure that draggable and resizable do not conflict.