jQuery UI Draggable元素对齐目标容器网格的实现难题

核心思路：以可放置元素（#droppable）的文档坐标作为网格原点，计算拖拽元素相对于该原点的偏移量，按网格尺寸取整后转换回拖拽元素的相对位置，实现精准对齐。

修正后的代码 #

$(document).ready(function(){
    // 定义网格参数
    const gridSize = 40;
    const droppable = $("#droppable");
    const droppableOffset = droppable.offset();

    $(".draggable").draggable({
        revert: true,
        revertDuration: 0,
        containment: ".container",

        drag: function( event, ui ) {
            // 获取拖拽元素的文档坐标
            const helperOffset = ui.helper.offset();
            
            // 计算拖拽元素相对于droppable网格原点的偏移量
            const relativeTop = helperOffset.top - droppableOffset.top;
            const relativeLeft = helperOffset.left - droppableOffset.left;
            
            // 按网格尺寸取整，得到对齐后的偏移量
            const alignedRelativeTop = Math.round(relativeTop / gridSize) * gridSize;
            const alignedRelativeLeft = Math.round(relativeLeft / gridSize) * gridSize;
            
            // 将对齐后的文档坐标转换为拖拽元素相对于父容器的位置
            const parentOffset = ui.helper.parent().offset();
            ui.position.top = droppableOffset.top + alignedRelativeTop - parentOffset.top;
            ui.position.left = droppableOffset.left + alignedRelativeLeft - parentOffset.left;
        }
    });

    $(".droppable").droppable({
        accept: ".draggable",
        tolerance: "fit",
        drop: function(event, ui) {
            $(ui.draggable).appendTo($(this));
        }
    });
});

关键修正说明 #

• 网格基准锚定：直接以#droppable的文档坐标作为40x40网格的原点，避免原代码中错误计算容器自身位置余数的逻辑
• 坐标转换逻辑：将拖拽元素的位置从文档坐标转换为相对于网格原点的偏移量，取整后再转换回父容器相对位置，确保对齐精准
• 移除干扰参数：原代码的snap和snapTolerance会与自定义对齐逻辑冲突，直接移除以避免干扰

内容的提问来源于stack exchange，提问作者Tired8296