jQuery UI draggable: Use other element for containment and snapTo calculation

Question

I have 2 elements that both need to be dragged. The simplified markup is as follows:

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

They need to be contained in an area and also snapTo certain elements in that area. The problem is that I want draggable to look at .item and not .wrapper when calculating how it should be contained. Because the buttons area positioned slightly outside .item.

If I use draggable on .item, .wrapper does not move along.

If I use draggable on .wrapper, .item can not be positioned completely to the top, right or bottom of the element used for containment.

Simplified code:

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

Does anybody have an idea on how to solve this? Your help is greatly appreciated.

Answer 1

if you don't have overflow:hidden applied to your wrapper then just make the wrapper exactly the same measurements as your item. You still can position your buttons with negative values like: bottom:-5px. This way they will stay the same way like you have them now with that slight padding on your wrapper.

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