0

両方をドラッグする必要がある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
});

状況の説明

誰かがこれを解決する方法についてアイデアを持っていますか?あなたの助けは大歓迎です。

4

1 に答える 1

1

ラッパーに適用していない場合はoverflow:hidden、ラッパーをアイテムとまったく同じ測定値にしてください。次のような負の値でボタンを配置することもできますbottom:-5px。このようにして、ラッパーにわずかなパディングを付けて、現在と同じように維持します。

#wrapper{ padding:0 }
.buttons{position:absolute; bottom:-5px;right:-5px}
于 2012-02-01T14:56:11.557 に答える