Ability to snap to grid

[jschr]

This is probably an ambitious request but it would be pretty great to have the ability to snap to a defined grid. The grid could be defined in pixels or percentages ideally.

The idea comes from trying to replicate the Facebook iOS chat heads interaction:
http://www.youtube.com/watch?feature=player_detailpage&v=Bm-tNnmFaUA#t=60s

Thanks for the work on the very cool plugin by the way!

[briangonzalez]

Funny you should request this as me and another user were coding this up just yesterday. We used a mixture of constrainToParent, droppable, and a little custom functionality to achieve the affect.

Check it out: http://codepen.io/briangonzalez/pen/2231869157a63463f74cae8334feb818 Obviously it's note 100% the same, but you get the idea...

A funny side note is that I wrote down "snap to grid" in my notes for Pep's roadmap but I was thinking something more along the lines of jQuery UI's snap to grid: http://jqueryui.com/resources/demos/draggable/snap-to.html

[jschr]

Wow that's really cool, definitely bookmarking that for later. Thanks!

The jQuery UI's snap to grid implementation would be perfect. I only wish you could define a grid by percentages so that the number of grid points remains the same across different viewport sizes.

[jschr]

Actually now that I've put a bit more thought into it a percentage based grid would be useful only to make sure you snap to points where the element is never outside the viewport. Take a look at the 80px snap example from jQuery UI's draggable demo. You can snap the element so that it's partially outside the viewport.

What would be next-level awesome is being able to define percentage based grids for different viewport sizes - i.e. Desktops snap to 10%, tablets to 25%, mobile to 50%, etc...

Anyways, figured I'd get my 2 cents while it's still on the roadmap :)

Thanks again.

[9uenther]

I am currently using a pixel based grid. I'm changed three rows of code:

;(function ( $, window, undefined ) {

  "use strict";

  //  create the defaults once
  var pluginName = 'pep';
  var defaults   = {

    // Options
    // ----------------------------------------------------------------------------------------------
    // See ** https://github.com/briangonzalez/jquery.pep.js ** for fully documented options.
    // It was too hard to manage options here and in the readme.
    // ----------------------------------------------------------------------------------------------
    initiate:                       function(){},                                
    start:                          function(){},                                
    drag:                           function(){},                                
    stop:                           function(){},                                
    rest:                           function(){},
    startThreshold:                 [0,0],         
    grid:                           [0,0],    
    ...

and

  //  handleMove();
  //    the logic for when the move events occur 
  Pep.prototype.handleMove = function() {

            // setup our event object
            if ( typeof(this.moveEvent) === 'undefined' ) 
              return;

            // get our move event's x & y
            var ev      = this.normalizeEvent( this.moveEvent );
            var curX    = window.parseInt(ev.pep.x / this.options.grid[0]) * this.options.grid[0];
            var curY    = window.parseInt(ev.pep.y / this.options.grid[1]) * this.options.grid[1];
            ...

[briangonzalez]

Thanks for sharing.

Wouldn't this cause division by zero issues if grid: [0,0] were the defaults?