當使用jQuerydraggable時，為什么我的div不向四面撲去？

我試圖讓這些子 divs 在所有方面都與父 div 的內部相扣，但它們只與內部和外部 div 的頂部和左側相扣。

我認為我的代碼與jQuery檔案中的測驗代碼相似，只是在他們的代碼中，可抓取的專案不是框架的孩子，而在我的例子中，它們是我希望它們抓取的DIV的孩子。

jQuery(' 。 outer-icon-block').draggable({snap: ".inner-box",snapMode:"both" }）；

.inner-box {
  
}

img {
  width: 50px;
}

.outer-box {
    background-color: 綠色。
    position: relative;
    width: 100%。
   height:600px;
  
}

#outer-box {
    box-shadow: 1px 1px 3px 2px #999999;
}

#manage-preview-inner {
    width: 480px;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

<script src="https://cdnjs. cloudflare.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>/span>
<link href="https://code.jquery. com/ui/1.12.1/themes/base/jquery-ui.css" rel="styleheet"/>
<script src="https://code. jquery.com/ui/1.12.0/jquery-ui.js"></script>

<div id="manage-preview-inner">/span>
< div id="outer-box" class="outer-box"> 
<div class="inner-box"/span>>

<div class="outer-icon-block outer-block ui-draggable ui-draggable-handle" > 1<img src="https: //upload. wikimedia.org/wikipedia/commons/thumb/f/f6/Emojione_1F613.svg/512px-Emojione_1F613.svg。 png" style="outline: solid 1px white;"></div> 

< div class="outer-icon-block outer-block ui-draggable ui-draggable-handle"  style="position: relative;">2<img src="https://upload. wikimedia.org/wikipedia/commons/thumb/f/f6/Emojione_1F613.svg/512px-Emojione_1F613.svg。 png" style="outline: solid 1px white;"></div> 

< div class="outer-icon-block outer-block ui-draggable ui-draggable-handle"  style="position: relative;">3<img src="https://upload. wikimedia.org/wikipedia/commons/thumb/f/f6/Emojione_1F613.svg/512px-Emojione_1F613.svg。 png" style="outline: solid 1px white"></div> 

</div>/span>
</div>/span>
</div>/span>

uj5u.com熱心網友回復：

你的代碼段和jquery-ui例子的不同之處在于，dragables有一個明確的高度 寬度。

在你的代碼段中添加這個可以使其正常作業（邊界只是為了看到它的發生）

注意你的綠色框與內框的大小不一樣，所以我在被搶占的div上添加了一個邊框，這樣你就可以看到它在作業；它已經搶占了底部，只是沒有搶占到右邊。

jQuery(' 。 outer-icon-block').draggable({snap: ".inner-box",snapMode:"both" }）；

.inner-box {
  border:10px solid blue;
}

img {
  width:50px;
}

. outer-icon-block { width:60px; height:50px; border: 1px solid red; }

.outer-box {
    background-color: 綠色。
    position: relative;
    width: 100%。
   height:600px;  
}

#outer-box {
    box-shadow: 1px 1px 3px 2px #999999;
}

#manage-preview-inner {
    width: 480px;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

<script src="https://cdnjs. cloudflare.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>/span>
<link href="https://code.jquery. com/ui/1.12.1/themes/base/jquery-ui.css" rel="styleheet"/>
<script src="https://code. jquery.com/ui/1.12.0/jquery-ui.js"></script>

<div id="manage-preview-inner">/span>
< div id="outer-box" class="outer-box"> 
<div class="inner-box"/span>>

<div class="outer-icon-block outer-block ui-draggable ui-draggable-handle" > 1<img src="https: //upload. wikimedia.org/wikipedia/commons/thumb/f/f6/Emojione_1F613.svg/512px-Emojione_1F613.svg。 png" style="outline: solid 1px white;"></div> 

< div class="outer-icon-block outer-block ui-draggable ui-draggable-handle"  style="position: relative;">2<img src="https://upload. wikimedia.org/wikipedia/commons/thumb/f/f6/Emojione_1F613.svg/512px-Emojione_1F613.svg。 png" style="outline: solid 1px white;"></div> 

< div class="outer-icon-block outer-block ui-draggable ui-draggable-handle"  style="position: relative;">3<img src="https://upload. wikimedia.org/wikipedia/commons/thumb/f/f6/Emojione_1F613.svg/512px-Emojione_1F613.svg。 png" style="outline: solid 1px white"></div> 

</div>/span>
</div>/span>
</div>/span>

標籤：

上一篇：jQueryuiresizable傳遞調整大小事件的變數以停止事件

下一篇：實作雙端滑動視窗的用戶界面