As I was experimenting with making images draggable and resizable, I encountered a small issue. When I attempted to drag two or more images, they would merge into one large draggable object instead of remaining separate. My goal was to make each image draggable individually.
$(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('<img class="modal-content" src="' + $(this).attr('src')+ '">'); $('#fotos').draggable();
$('.modal-content').resizable();
});
});.imgcontainerss{
float:left;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.js"></script>
<link rel="stylesheet" type="text/css"
href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.1/themes/base/jquery-ui.css"/>
<div id="fotos" ><img class="modal-content" id="imgdisplay" /></div>
<select id="imajes">
<option value="">Choose Image</option>
<option value="dog">Dog</option>
</select> <select id="dog" name="subselector" class="subselector" style="display:none">
<option value="">Choose an item</option>
<option value="bulldog">Bulldog</option>
</select>
<div style='display:none;' id="bulldogimges" class="smallimages">
<div class="imgcontainerss" data-image="https://torcdesign.com/clipart/pT78gE6pc.gif">
<img src="https://torcdesign.com/clipart/pT78gE6pc.gif" alt="Smiley face" width="55" height="55">
</div>
<div class="imgcontainerss" data-image="https://torcdesign.com/clipart/LiKkRqkeT.gif">
<img src="https://torcdesign.com/clipart/LiKkRqkeT.gif" alt="Smiley face" width="55" height="55">
</div></div>Resizable and draggable images inside div