如何使项目捕捉到网格？

Question

我想让 table 中的项目可拖动，但它们还必须吸附到网格中。如果物品尺寸不同，我该如何管理？如果我能用 jQuery.

来做就更好了

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

Answer 1

我要继续post这里也有一个答案，虽然我是通过你问的后续问题来到这里的。

您可以在 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;
    }
}  
});

如何使项目捕捉到网格？

How can I make items snap to a grid?

html

grid

jquery