Resizable And Draggable Images Inside Div

How can I make each images resizable and draggable? Bellow is a small piece of code that allows the user to pick and choose what image he or she would like to display. They can pic

Solution 1:

Update fiddle code and added draggable and resizable to image

Need to click on image to enlarge it and resize it.

$(document).ready(function() {
  $('#imajes').change(function() {
    $('.subselector').hide();
    $('.smallimages').hide();
    $('#' + $(this).val()).show();
	
  });
  
    $('.smallimages').hide();
    var id = $(this).attr('id');
    var val = $(this).val();
	
	
$('#dog').on('change', function() {
  
  $("#bulldogimges").css('display', (this.value == 'bulldog') ? 'block' : 'none');

});

$('img').on('click', function() {
    $('#fotos').append('<div class="imgdrag"><img class="modal-content" src="' + $(this).attr('src')+ '"/></div>'); $('.imgdrag').draggable();
$('#fotos').droppable();
	           $('.modal-content').resizable();


});

  
  
});

.imgcontainerss{
    float:left;
}

<scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script><scripttype="text/javascript"src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.js"></script><linkrel="stylesheet"type="text/css"href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.1/themes/base/jquery-ui.css"/><divid="fotos" ><imgclass="modal-content"id="imgdisplay" /></div><selectid="imajes"><optionvalue="">Choose Image</option><optionvalue="dog">Dog</option></select><selectid="dog"name="subselector"class="subselector"style="display:none"><optionvalue="">Choose an item</option><optionvalue="bulldog">Bulldog</option></select><divstyle='display:none;'id="bulldogimges"class="smallimages"><divclass="imgcontainerss"data-image="https://torcdesign.com/clipart/pT78gE6pc.gif"><imgsrc="https://torcdesign.com/clipart/pT78gE6pc.gif"alt="Smiley face"width="55"height="55"></div><divclass="imgcontainerss"data-image="https://torcdesign.com/clipart/LiKkRqkeT.gif"><imgsrc="https://torcdesign.com/clipart/LiKkRqkeT.gif"alt="Smiley face"width="55"height="55"></div></div>