jQuery Draggable snap to corners

jQuery UI draggable will allow you to snap to corners only if you are within the tolerance range. This example shows how to force a snap to the corners of an element regardless of tolerance.
$('#my-element').draggable({
	grid: [40,40],
	snap: 'body',
	snapMode: 'inner',
	snapTolerance: 40,
	start: function (event, ui) {
		$(this).css({left: 'auto', right: 'auto', top: 'auto', bottom: 'auto'});
	},
	stop: function (event, ui) {
		var cWidth = $(window).width() / 2;
		var cHeight = $(window).height() / 2;
		
		if (ui.position.left > cWidth) {
			$(this).css({left: 'auto', right: 0});
		}
		else {
			$(this).css({right: 'auto', left: 0});
		}
		
		if (ui.position.top > cHeight) {
			$(this).css({top: 'auto', bottom: 0});
		}
		else {
			$(this).css({bottom: 'auto', top: 0});
		}
	}
});
Posted by
Snippet Viewed 3429 times.

Share your jQuery code snippets:

  • Get some recognition & a link back to your site.
  • Create your own code library.
  • Help your fellow developers, as they have helped you.

 

Submit | Browse

Most Recent jquery snippets

Most Viewed