Move behavior

Last updated: April 20, 2012

Move the boxes around. Click and drag them. This is a fairly common behavior. I decided to write my own for use within my own components for various reasons.

Properties

  • grid - an integer to snap the object to. In other words, say I set my grid size to 100. When I drag greater than 50px in a given direction, the object will snap itself to the grid size - or 100px in this case in the direction of the drag. Try the last box to see what I mean.
  • bounds - an object {x: [min, max], y: [min, max]} that sets the boundaries you can move within. This comes in handy with my value sliders, gradient maker, etc.

 

 

 

 

bounds:
x: 0, 123
bounds:
y: -100, 0
grid: 5
bounds:
x: 0, 64
y: 0, 64
grid: 16
bounds: none
grid: 100

Implementation is simple. Download move.js and you can implement the above behaviors like so:

var move1 = new WK.Move({
	el: $('#d1'),
	bounds: { x: [0, 123], y: null },
	onMove:function(){
		console.log(this);
	},
	onStart:function(){
		console.log(this);
	},
	onComplete:function(){
		console.log(this);
	}
});
var move2 = new WK.Move({
	el: $('#d2'),
	grid: 5,
	bounds: { x: null, y: [-100, 0] }
});
var move3 = new WK.Move({
	el: $('#d3'),
	grid: 16,
	bounds: { x: [0, 64], y: [0, 64] }
});
var move4 = new WK.Move({
	el: $('#d4'),
	grid: 100
});

Additionally, there is a public method called "setBounds" that enables dynamic boundary adjustment. Simply pass in a bounds object like the ones above and the behavior will dynamically adjust to accomodate the new boundaries.

Download move.js