Why is there a grey box floating in the upper-left corner of my image and why is code only resizing-CodePudding

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

CodePudding user response：

Do the images need to be inside p elements?

Tweaking the content and styling to this seems to work.

<div id="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.

CodePudding user response：

The issue you mentioned happens because you set the width and height of the frame to 0px.

$(function() {
  $( "#draggable1" ).draggable();
  $( "#draggable2" ).draggable();
});

#draggable1, #dragable2
{
  width: 500px; 
  height: 500px; 
  padding: 1em;
}

img{
  width: 500px;
  height: 500px;
}

<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 id="draggable1" >
  <p>
    <img 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" >
  <p>
    <img src="https://static.showit.co/file/_rojEJb2QBytWaRmzMySCg/118367/screen_shot_2022-01-15_at_12_06_58_pm.png">
  </p>
</div>