I'm hoping to add a very simple 'Resizable' function to each image. Like a single handle in the bottom right that allows users to resize them. For some reason, each time I try and insert the Resizable function into the script, the whole thing stops working. Right now it works great for dragging. Any tips? Thanks in advance!
<link rel="stylesheet" type="text/css" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css"/>
<div class="container">
<div id="terracotta" class="draggableContainer">
<p>
<img class="draggableImage8" width="190px" src="https://static.showit.co/file/02iVvuYJTPuHVo0bvmtfPw/118367/screen_shot_2022-06-09_at_4_29_57_pm.png" alt="bridal" style="position: absolute; left: 140px; top: -10px;">
</p>
</div>
<div id="terracotta" class="draggableContainer">
<p>
<img class="draggableImage2" width="200px" src="https://static.showit.co/file/SniVsCT4TI6vlO11MeCT6Q/118367/pexels-amina-filkins-5425137.jpg" alt="pampasvase" style="position: absolute; left: 40px; top: 130px;">
</p>
</div>
<div id="terracotta" class="draggableContainer">
<p>
<img class="draggableImage2" width="210px" src="https://static.showit.co/file/8kXF2aZnTFWacjGrsydtaw/118367/pexels-photo-5359324.jpg" alt="tent" style="position: absolute; left:250px; top: 350px;">
</p>
</div>
<div id="terracotta" class="draggableContainer">
<p>
<img class="draggableImage9" width="180px" src="https://static.showit.co/file/ezoxZmgvQeyemX5jBU4P7g/118367/kaboompics_woman_s_legs_with_palm_shadow.jpg" alt="palmshadow" style="position: absolute; left: 285px; top: 150px;">
</p>
</div>
<div id="terracotta" class="draggableContainer">
<p>
<img class="draggableImage3" width="190px" src="https://static.showit.co/file/O28TqyRjRtSLTMVN4lCgEw/118367/kaboompics_a_woman_in_a_brown_sweater_with_a_black_hat_on_her_head.jpg" alt="girlinhat" style="position: absolute; left: 600px; top: 100px;">
</p>
</div>
<div id="terracotta" class="draggableContainer">
<p>
<img class="draggableImage12" width="200px" src="https://static.showit.co/file/5NDU0460Q8iptTNyt07LjA/118367/jonathan-borba-p1b9ztwa0di-unsplash.jpg" alt="dance" style="position: absolute; left: 890px; top: 370px;">
</p>
</div>
<div id="terracotta" class="draggableContainer">
<p>
<img class="draggableImage12" width="190px" src="https://static.showit.co/file/801y1OPPQde-Zvl-zd4zbg/118367/screen_shot_2022-06-09_at_4_20_29_pm.png" alt="twigs" style="position: absolute; left: 870px; top: 10px;">
</p>
</div>
<div id="terracotta" class="draggableContainer">
<p>
<img class="draggableImage12" width="200px" src="https://static.showit.co/file/X5Z4ojapT2CA69e4yzFspA/118367/screen_shot_2022-06-09_at_4_18_25_pm.png" alt="chair" style="position: absolute; left: 750px; top: 300px;">
</p>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui-touch-punch/0.2.3/jquery.ui.touch-punch.min.js"></script>
<script>
$(function() {
$(".draggableContainer").draggable({
stack: ".draggableContainer",
});
});
</script>