jQuery UI draggable: Use other element for containment and snapTo calculation
-
21-04-2021 - |
質問
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.
#wrapper{ padding:0 }
.buttons{position:absolute; bottom:-5px;right:-5px}