1

this question has been asked several times before, but I haven't seen any answers. I'd thought I would give it a shot.

I'm using the jQuery UI draggable (and droppable) functions on multiple items. When the items are dragged, they never align to the same grid line, so this makes it pointless for lining up items.

I tried laying out a thousand <div class="grid-cell"> but this causes some noticeable performance issues when replicated over a couple droppable zones and css animations.

Here is an example of items not lining up to the same grid: http://jsfiddle.net/K3zzY/

Here are some similar questions: jQuery Draggable Custom Snap to Grid jQuery UI Draggable, Snapping to a Grid https://stackoverflow.com/questions/17353256/jquery-ui-draggable-to-fixed-grid

Thanks for any suggestions.

I also tried to manipulate the draggable's position on:drag, but it doesn't seem to work as in the element never seems to be repositioned.

My Approach Using a code suggestion from here: Draggable square/rectangle that snaps to grid in JQuery/Javascript

I have my code as:

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

1 回答 1

1

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

我已经重复了相关代码，如下：

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

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

于 2013-07-02T17:33:01.387 回答