I'm embedding some javascript into my Showit website. It is a drag and drop feature to portray a collage/mood board effect. The code is working great, but I'm having trouble resizing the images.
There is a grey box in the upper left corner of the image that is taking on any code changes. For example, right now the width/height is set to 0px, so the grey box is a tiny dot. If I increase it to 50px, it gets larger but the image stays the same size.
I'm assuming there needs to be some parent code adjustments but I'm still fresh with javascript. I'm sharing links below to hopefully help.
Thanks so much in advance!
Here's a link to the code in action https://denofdreamers.w3spaces.com/saved-from-Tryit-2022-01-15.html
And here is a link to the code so far https://www.codepile.net/pile/bOVJbwOm
The issue you mentioned happens because you set the width and height of the frame to 0px. I disabled the classes used via jquery.ui to place a frame on the <img> element and added a border on the <img> element.
$(function() {
$( "#draggable1" ).draggable();
$( "#draggable2" ).draggable();
$( "#draggable3" ).draggable();
});* {
margin: 0px;
padding: 0px;
}
.container {
display: flex;
flex-wrap: no-wrap;
}
.draggableImage{
padding: 5px;
border: 5px solid #EEE;
width: 50%;
}
.draggableContainer{
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css" integrity="sha512-aOG0c6nPNzGk+5zjwyJaoRUgCdOrfSDhmMID2u4+OIslr0GjpLKo7Xm0Ao3xmpM4T8AmIouRkqwj1nrdVsLKEQ==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js" integrity="sha512-uto9mlQzrs59VwILcLiRYeLKPPbS/bT71da/OEBYEwcdNUk8jYIy+D176RYoop1Da+f9mvkYrmj5MCLZWEtQuA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<div class="container">
<div id="draggable1" class="draggableContainer">
<p>
<img class="draggableImage" src="https://static.showit.co/file/sJcRsatKTmC2WnNTV_hJVA/118367/screen_shot_2022-01-15_at_12_07_17_pm.png">
</p>
</div>
<div id="draggable2" class="draggableContainer">
<p>
<img class="draggableImage" src="https://static.showit.co/file/_rojEJb2QBytWaRmzMySCg/118367/screen_shot_2022-01-15_at_12_06_58_pm.png">
</p>
</div>
<div id="draggable3" class="draggableContainer">
<p>
<img class="draggableImage" src="https://static.showit.co/file/_rojEJb2QBytWaRmzMySCg/118367/screen_shot_2022-01-15_at_12_06_58_pm.png">
</p>
</div>
</div>Do the images need to be inside p elements?
Tweaking the content and styling to this seems to work.
<div id="draggable" class="draggable ui-widget-content ui-draggable" style="position: relative;left: 5px;top: -4px;background: none;width: 167px;height: 100px;">
<img src="..." style="width: 100%; height: auto;">
</div>
Updated so the img element inherits the width of the draggable div.