jQuery UI 可拖动：使用其他元素进行包含和 snapTo 计算
我有两个元素都需要拖动。简化的标记如下：
<div class="wrapper">
<img class="item" src="foo.jpg" />
<ul class="buttons">
<li>Crop</li>
<li>Resize</li>
</ul>
</div>
它们需要包含在一个区域中，并且还需要捕捉到该区域中的某些元素。问题是我希望draggable 在计算如何包含它时查看 .item 而不是 .wrapper 。因为按钮区域稍微位于 .item 之外。
如果我在 .item 上使用可拖动，.wrapper 不会移动。
如果我在 .wrapper 上使用draggable，则 .item 无法完全定位到用于包含的元素的顶部、右侧或底部。
简化代码：
$('.wrapper').draggable ({
containment: '.page',
snap: '.page-grid',
snapMode: 'inner',
snapTolerance: 20
});
有人知道如何解决这个问题吗？非常感谢您的帮助。
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.
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
如果您没有将
overflow:hidden应用到您的包装上，那么只需使包装与您的商品尺寸完全相同即可。您仍然可以使用负值来放置按钮，例如：bottom:-5px。这样，它们就会像现在一样保持相同的状态，但包装纸上有轻微的填充。if you don't have
overflow:hiddenapplied 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.