如何使项目对齐网格？ [关闭]

Question

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

编辑：我有一个 3 x 4 的桌子，每个 td 是一个 50 x 50 像素的正方形。如何使用 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;
    }
}  
});