Question

之前已经多次询问过这个问题，但我没有看到任何答案。我以为我会试一试。

我在多个项目上使用jQuery UI可拖动（和可放置）功能。当拖动项目时，它们永远不会对齐到同一网格线，因此这使得排列项目毫无意义。

我尝试布置了一千<div class="grid-cell">但是这会在一些可放置区域和css动画上复制时导致一些明显的性能问题。

以下是未排列到同一网格的项目示例：http://jsfiddle.net/K3zzY/

以下是一些类似的问题： jQuery Draggable Custom Snap to Grid jQuery UI Draggable, Snapping to a Grid https://stackoverflow.com/questions/17353256/jquery-ui-draggable-to-fixed-grid

感谢您的任何建议。

我还尝试操纵拖动的位置：拖动，但它似乎不起作用，因为元素似乎永远不会被重新定位。

我的方法 使用此处的代码建议：Draggable square/rectangle that snaps to grid in JQuery/Javascript

我的代码为：

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
    }
}

Answer 1

问题是您将网格设置为不是项目大小的因素。 Here是你的小提琴，用正确的实现进行更新。

我重复了以下相关代码：

<强>的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; 
}

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

jQuery draggable排队网格

1 个答案: