Estoy incrustando algo de javascript en mi sitio web Showit. Es una función de arrastrar y soltar para representar un efecto de collage/mood board. El código funciona muy bien, pero tengo problemas para cambiar el tamaño de las imágenes.
Hay un cuadro gris en la esquina superior izquierda de la imagen que acepta cualquier cambio de código. Por ejemplo, en este momento el ancho/alto está establecido en 0px, por lo que el cuadro gris es un pequeño punto. Si lo aumento a 50 px, se vuelve más grande pero la imagen permanece del mismo tamaño.
Supongo que debe haber algunos ajustes en el código principal, pero todavía estoy fresco con javascript. Estoy compartiendo enlaces a continuación para ayudar con suerte.
Muchas gracias de antemano!
Aquí hay un enlace al código en acción https://denofdreamers.w3spaces.com/saved-from-Tryit-2022-01-15.html
Y aquí hay un enlace al código hasta ahora https://www.codepile.net/pile/bOVJbwOm
El problema que mencionaste ocurre porque configuraste el width y la height del marco en 0px . Deshabilité las clases utilizadas a través de jquery.ui para colocar un marco en el elemento <img> y agregué un borde en el elemento <img> .
$(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>¿Las imágenes deben estar dentro de elementos p ?
Ajustar el contenido y el estilo a esto parece funcionar.
<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> Actualizado para que el elemento img herede el ancho del div arrastrable.