Getting jQuery draggable to snap to specific grid

Question

(NOTE: Some have asked similar questions, but were too specific and yielded no usable answers)

jQuery UI\'s draggable widget has options fo

Answer 1

As an alternative to attempting to use the grid option in jQuery UI, I have created my own grid (that you can make visible or invisible using css), then use the snap option and specify the class of each of my grid lines.

To your original jsfiddle, I added the following css:

.gridlines {
display: none;
position:absolute;
background-color:#ccc;
}

and the following javascript:

function createGrid(size) {
  var i,
  sel = $('.drop-target'),
      height = sel.height(),
      width = sel.width(),
      ratioW = Math.floor(width / size),
      ratioH = Math.floor(height / size);

  for (i = 0; i <= ratioW; i++) { // vertical grid lines
    $('
').css({
        'top': 0,
        'left': i * size,
        'width': 1,
        'height': height
    })
      .addClass('gridlines')
      .appendTo(sel);
  }

  for (i = 0; i <= ratioH; i++) { // horizontal grid lines
    $('
').css({
        'top': i * size,
        'left': 0,
        'width': width,
        'height': 1
    })
      .addClass('gridlines')
      .appendTo(sel);
    }

  $('.gridlines').show();
}

createGrid(20);

Here is the jsFiddle (http://jsfiddle.net/madstop/46sqd/2/)