div中可resize和可拖动的图像

如何使每个图像可resize和可拖动？

Bellow是一小段代码，允许用户选择他或她想要显示的图像。 他们可以随心所欲地选择两者。

我想要做的是让用户调整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  
 
  
 
  
  

Answer 1

更新小提琴代码并添加可拖动和可resize的图像

需要点击图片放大并resize。

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

    
  Choose Image Dog   Choose an item Bulldog