我正在將一些 javascript 嵌入到我的 Showit 網站中。這是一個拖放功能來描繪拼貼/情緒板效果。代碼運行良好，但我無法調整影像大小。
影像的左上角有一個灰色框，它正在接受任何代碼更改。例如，現在寬度/高度設定為 0px，所以灰色框是一個小點。如果我將它增加到 50px，它會變大，但影像保持相同的大小。
我假設需要對父代碼進行一些調整，但我對 javascript 仍然很陌生。我在下面分享鏈接，希望能有所幫助。
提前非常感謝！
這是運行中代碼的鏈接 https://denofdreamers.w3spaces.com/saved-from-Tryit-2022-01-15.html
這是到目前為止的代碼鏈接 https://www.codepile.net/pile/bOVJbwOm
uj5u.com熱心網友回復：
您提到的問題發生是因為您將框架的widthand設定為. 我禁用了通過jquery.ui使用的類來在元素上放置一個框架并在元素上添加一個邊框。height0px<img><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>uj5u.com熱心網友回復：
影像是否需要在p元素內部？
調整內容和樣式似乎可行。
<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>
更新后img元素繼承了可拖動 div 的寬度。
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/411893.html
標籤：
上一篇：錯誤顯示導航欄的CSS代碼問題