Undo , Redo , Delete For Selected Image Using Jquery

Hi i have an image upload form , and when selecting upload the image it will show the preview also. I write both resizable, draggable function for the images . But is there any

Solution 1:

Try this:

I added this jquery code

$(document).on('click','img',function(){
          $('img').removeClass('shadow'); 
          $(this).toggleClass("shadow");
       });

and the shadow css

.shadow{
        box-shadow: 10px10px5px#888888;
      }

$( function() {

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

        functionpreviewImages(){
            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();
              $( ".img-div" ).resizable();
              } 
  $(document).on('click','img',function(){
      $('img').removeClass('shadow'); 
      $(this).toggleClass("shadow");
   });
});

.new-multiple{
  width:400px!important;
  height:400px!important;
  background:white;
  border:2px solid red;
  overflow:hidden;
  }
  .shadow{
    box-shadow: 10px10px5px#888888;
  }
 .img-div{
   width:200px;
   height:200px;
 } 
 .newly-added{
    width:100%;
    height:100%;
} 

<linkhref="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"rel="stylesheet"/><scriptsrc="https://code.jquery.com/jquery-1.12.4.js"></script><scriptsrc="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script><inputname="user_file[]"id="user_file"style="position: relative;overflow: hidden"multiple=""type="file"><divclass="new-multiple"></div>