両方をドラッグする必要がある2つの要素があります。簡略化されたマークアップは次のとおりです。
<div class="wrapper">
<img class="item" src="foo.jpg" />
<ul class="buttons">
<li>Crop</li>
<li>Resize</li>
</ul>
</div>
それらはエリアに含まれている必要があり、そのエリアの特定の要素にもスナップする必要があります。問題は、ドラッグ可能で、それがどのように含まれるべきかを計算するとき.item
ではなく、見たいということです。.wrapper
ボタンの領域が少し外側に配置されているため.item
です。
でドラッグ可能を使用すると.item
、.wrapper
移動しません。
でドラッグ可能を使用すると、包含に使用される要素の上部、右側、または下部に完全に配置できません.wrapper
。.item
簡略化されたコード:
$('.wrapper').draggable ({
containment: '.page',
snap: '.page-grid',
snapMode: 'inner',
snapTolerance: 20
});
誰かがこれを解決する方法についてアイデアを持っていますか?あなたの助けは大歓迎です。