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.
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.