如何将项目捕捉到网格？

Question

我想让表中的项目可拖动，但它们也必须捕捉到网格。如果物品尺寸不同，我该如何管理？如果我能用jQuery做到这一点最好。

编辑：我有一个3 x 4的桌子，每个td是一个50 x 50 px的正方形。我如何使用JQuery使td单元格中的div可拖动，但它们总是会捕捉到td单元格？ （有点像在Windows桌面上，你可以让应用程序捕捉到一个不可见的网格）

Answer 1

我会继续在这里发布答案，虽然我是通过你提出的后续问题来到这里的。

您可以在jQuery UI可拖动的拖动事件中轻松创建自己的对齐网格功能。

基本上，您想要检查拖动拖动到网格的任何点的当前UI位置的接近程度。该接近度总是可以表示为位置的剩余部分除以网格。如果该余数小于或等于snapTolerance，则只需将该位置设置为没有该余数的位置。

在散文中说这很奇怪。在代码中应该更清楚：

现场演示

// Custom grid
$('#box-3').draggable({
drag: function( event, ui ) {
    var snapTolerance = $(this).draggable('option', 'snapTolerance');
    var topRemainder = ui.position.top % 20;
    var leftRemainder = ui.position.left % 20;

    if (topRemainder <= snapTolerance) {
        ui.position.top = ui.position.top - topRemainder;
    }

    if (leftRemainder <= snapTolerance) {
        ui.position.left = ui.position.left - leftRemainder;
    }
}  
});