Imágenes redimensionables y arrastrables dentro de div

¿Cómo puedo hacer que cada imagen se pueda redimensionar y arrastrar?

Bellow es una pequeña pieza de código que le permite al usuario escoger y elegir qué imagen le gustaría mostrar. Pueden elegir tanto como a cuantos quieran.

Lo que quiero hacer es que el usuario cambie el tamaño y arrastre la imagen dentro de un div.

$(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(''); $('#fotos').draggable(); $('#imgdisplay').resizable(); }); }); 
 .imgcontainerss { float: left; } 
   
Choose Image Dog Choose an item Bulldog
Smiley face
Smiley face

Actualice el código del violín y agregue que se puede arrastrar y cambiar el tamaño de la imagen

Es necesario hacer clic en la imagen para agrandarla y cambiar su tamaño.

 $(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('
'); $('.imgdrag').draggable(); $('#fotos').droppable(); $('.modal-content').resizable(); }); });
 .imgcontainerss{ float:left; }