Javascript jQuery可拖动的排列网格

这个问题以前被问过好几次，但我没有看到任何答案。我本以为我会试一试

我在多个项目上使用jQueryUIDragable（和Dropable）函数。当拖动项目时，它们永远不会对齐到同一条网格线，因此这使得排列项目毫无意义

我试着布置了一千个

，但当在几个可拖放区域和css动画上复制时，这会导致一些明显的性能问题

以下是一个项目未排列到同一网格的示例：

以下是一些类似的问题：

谢谢你的建议

我还尝试在：drag上操纵draggable的位置，但它似乎不起作用，因为在元素中似乎从未重新定位

我的方法 使用此处的代码建议：

我的代码为：

drag:function(e, ui){
    if(snapToGrid === true){
        ui.position.left = Math.floor((e.pageX - f._wrapper.offset().left) / snapToGridSize) * snapToGridSize,
        ui.position.top = Math.floor((e.pageY - f._wrapper.offset().top) / snapToGridSize) * snapToGridSize
    }
}

---

问题是您正在将网格设置为与项目大小无关的大小。是你的小提琴，用正确的方法更新

我已重复相关代码，如下所示：

jQuery

$(".draggable").draggable({
    grid:[20, 20] // 20 and 20 must be factors of the corresponding dimensions on your item
});

CSS

.draggable{
    width:38px; /* Width and Height are both adjusted to account for the border */
    height:38px;
    border: 1px solid black; 
}

---

如果决定要防止网格项重叠，只需将网格大小设置为与网格项本身的大小相同。是否使用这两种解决方案更新了您的小提琴，以便您可以比较它们。

问题在于您将网格设置为与项目大小无关的大小。是你的小提琴，用正确的方法更新

我已重复相关代码，如下所示：

jQuery

$(".draggable").draggable({
    grid:[20, 20] // 20 and 20 must be factors of the corresponding dimensions on your item
});

CSS

.draggable{
    width:38px; /* Width and Height are both adjusted to account for the border */
    height:38px;
    border: 1px solid black; 
}

---

如果决定要防止网格项重叠，只需将网格大小设置为与网格项本身的大小相同。您的小提琴是否已使用这两种解决方案进行了更新，以便您可以对它们进行比较。

因此，如果我有不同大小的元素，这将不起作用？我是否必须将我的网格设置为所有项目的最低公分母？这将是我的建议，是的。我没有进行过大量的实验，但我相信可以编写一个脚本，允许您使用不同大小的网格和项目，并根据最近的一个将元素捕捉到垂直/水平上/下/左/右/中心角/位置（即，如果左上角比左中心和左下角更近，则将项目的左上角捕捉到网格的左上角，以此类推。）。但是，如果在所有四个面上使用，这将变得非常复杂。因此，如果我有不同大小的元素，这将不起作用？我是否必须将网格设置为所有项目的最低公分母？这将是我的建议，是的。我没有进行过广泛的实验，但我相信可以编写一个我将允许您使用不同大小的网格和项目，并根据最近的一个，简单地将元素捕捉到垂直/水平上/下/左/右/中心角/位置（即，如果左上角比左中心和左下角更近，则将项目的左上角捕捉到网格的左上角等）。但是，如果在所有四个边上使用，这将变得非常复杂。