jQuery UI可拖動：使用其他元素進行包容和snapTo計算

Question

我有兩個元素都需要拖動。簡化的標記如下：

<div class="wrapper"> 
    <img class="item" src="foo.jpg" /> 
    <ul class="buttons"> 
     <li>Crop</li> 
     <li>Resize</li> 
    </ul> 
</div> 

他們需要被包含在一個地區，也snapTo在這方面的某些元素。問題是我想在計算應該如何包含它的時候可以拖動來查看.item而不是.wrapper。因爲按鈕區域位於.item之外。

如果我在.item上使用拖拽，.wrapper不能移動。

如果使用可拖動上.wrapper，.item不能完全定位到頂部，右側或底部用於容納所述元件的。

簡化代碼：

$('.wrapper').draggable ({ 
    containment: '.page', 
    snap: '.page-grid', 
    snapMode: 'inner', 
    snapTolerance: 20 
}); 

有誰知道如何解決這個問題的想法？非常感謝您的幫助。

Answer 1

如果您沒有overflow:hidden應用於您的包裝，那麼只需使包裝完全與您的物品相同的尺寸。您仍然可以使用負值定位按鈕，如：bottom:-5px。這樣他們將保持原樣，就像你現在用包裝上的輕微填充一樣。

#wrapper{ padding:0 } 
.buttons{position:absolute; bottom:-5px;right:-5px}