我有一些 HTML 结构:
<body>
<div id="board">
<div id="block" />
</div>
</body>
#board 可以放置在任何地方。
对于这个例子，我们假设它是 position:relative;左:3px； top: 7px; (注意 top 和 left 不是 10 的乘积)，body 有 margin: 0, padding 0。
我想让我的#block 捕捉到10px x 10px 网格。但是该网格应该从父级的左上角开始 (#board)，而不是页面的左上角!
所以它应该将我的 #block 对齐到 (3,7), (13, 17), (23, 27), ... 而不是 (0,0), (10, 10), (20, 20)....
如何实现？
当我使用时:
jQuery(value).draggable({
containment: "#board",
grid: [10,10],
snap: "#board"
});
它从页面左上角捕捉到 10px x 10px 网格，而不是 #board (并且仅另外捕捉到 #board< 的边缘，这不是解决方案)。
最佳答案
看来您的想法是正确的。如果您将 #block 相对于 #board 定位并遵循 Shningamae 的建议，将“snap”设置为 true，您将获得所需的结果。您可以使用 jQuery 的 offset 方法验证结果:
$('#block').draggable({
containment: "#board",
grid: [10,10],
snap: true,
stop: function() {
var offset = $(this).offset();
console.log("Top: " + offset.top + " Left: " + offset.left);
}
});
这是一个示例:http://jsfiddle.net/63G8H/
关于javascript - 将可拖动元素与从父级位置开始的网格对齐，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/20600115/