Options Grid snap on dragEnd

[ghost]

Hi man,

Is it possible to add/set the "grid" option on "dragEnd", so the object is free to move outside of the "grid", and when you release it on "dragEnd" it adapts and snaps into place (grid).

If you have a solution without digging around in core files or maybe motivation to add a new option for this it would be seriously super duper amazing mega awesome...

Best regards / Monk

dragger = new Draggabilly(elem, {
       containment: true,
       grid: [ 0 , 0 ]
});

dragger.on('dragStart', function () {
       dragger.options.grid = [0, 0];
});

dragger.on('dragEnd', function () {
       dragger.options.grid = [100, 100];
});

[desandro]

Interesting idea. Here's a hack that does it: http://codepen.io/desandro/pen/gbYELj

[ghost]

Yiiiiiiiiaaaaah now thats cool, thanks a lot man ! hmm trying to add some butter but it behaves rather strange and jumpy, any ideas? http://codepen.io/anon/pen/wBwZrG?editors=001

[ghost]

hmm behaves crazy on webkit browsers and great on firefox.. hmm webkitTransitionDuration does not seem to work either..

[desandro]

I'll leave that implementation up to you.

[ghost]

Well thank you sir. Omg. no pressure, remember breathe.. One, two, three, breathe! One, two, three, breathe...

[desandro]

I've updated the code so it's not munging with prototype.dragEnd. This code works with both Draggabilly v1.1.x and v1.2.x. http://codepen.io/desandro/pen/gbYELj

var draggie = new Draggabilly('.draggie');
var grid = [ 40, 40 ];

draggie.on( 'dragEnd', function() {
  draggie.position.x = applyGrid( draggie.position.x, grid[0] );
  draggie.position.y = applyGrid( draggie.position.y, grid[1] );
  draggie.setLeftTop();
});

or with jQuery

var $draggable = $('.draggie').draggabilly();
var draggie = $draggable.data('draggabilly');
var grid = [ 40, 40 ];

$draggable.on( 'dragEnd', function() {
  draggie.position.x = applyGrid( draggie.position.x, grid[0] );
  draggie.position.y = applyGrid( draggie.position.y, grid[1] );
  draggie.setLeftTop();
});

[ghost]

Aaahh cool man, looks great, thanks a lot !!

8 mar 2015 kl. 18:23 skrev David DeSandro notifications@github.com:

I've updated the code so it's not munging with prototype.dragEnd. This code works with both Draggabilly v1.1.x and v1.2.x. http://codepen.io/desandro/pen/gbYELj http://codepen.io/desandro/pen/gbYELj var draggie = new Draggabilly('.draggie'); var grid = [ 40, 40 ];

draggie.on( 'dragEnd', function() { draggie.position.x = applyGrid( draggie.position.x, grid[0] ); draggie.position.y = applyGrid( draggie.position.y, grid[1] ); draggie.setLeftTop(); }); or with jQuery

var $draggable = $('.draggie').draggabilly(); var draggie = $draggable.data('draggabilly'); var grid = [ 40, 40 ];

$draggable.on( 'dragEnd', function() { draggie.position.x = applyGrid( draggie.position.x, grid[0] ); draggie.position.y = applyGrid( draggie.position.y, grid[1] ); draggie.setLeftTop(); }); — Reply to this email directly or view it on GitHub https://github.com/desandro/draggabilly/issues/65#issuecomment-77762614.