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
    }
}
Community
  • 1
  • 1
Senica Gonzalez
  • 7,996
  • 16
  • 66
  • 108

1 Answers1

1

The problem is that you are setting the grid to a size that is not a factor of the size of your items. Here is your fiddle, updated with the correct implementation.

I have repeated the relevant code, below:

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

If you decide that you want to prevent the overlapping of grid items, you need only set the grid size to be the same as the size of the grid items, themselves. Here is your fiddle updated with both solutions, so so that you can compare them.

Zachary Kniebel
  • 4,686
  • 3
  • 29
  • 53
  • So if I had different sized elements, this would not work? Would I have to set my grid to the Lowest Common Denominator of all the items? – Senica Gonzalez Jul 02 '13 at 18:15
  • That would be my suggestion, yes. I have not performed extensive experimentation, but I believe that it would be possible to write a script that will allow you to use grids and items of different sizes, and simply snap the element to either the vertical/horizontal upper/lower/left/right/center corners/positions, based on the closest one (i.e., snap the top left corner of the item to the grid's top-left corner, if the top-left corners are closer than the left centers, and bottom left corners, etc.). This would get very complex, however, if used on all four sides. – Zachary Kniebel Jul 02 '13 at 19:20