jQuery UI draggable: использовать другой элемент для локализации и вычисления snapTo

Question

У меня есть 2 элемента, которые нужно перетащить. Упрощенная разметка выглядит следующим образом:

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

Они должны содержаться в области, а также привязываться к определенным элементам в этой области. Проблема в том, что я хочу перетаскивать взгляд на .item, а не .wrapper при расчете, как он должен содержаться. Потому что область кнопок расположена немного снаружи .item.

Если я использую Draggable на .item, .wrapper не будет двигаться вперед.

Если я использую dragggable на .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}