jquery - jQuery UI 可拖动：使用其他元素进行包含和 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 on .item，.wrapper则不会移动。

如果我使用 draggable on .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}