Draggable Background

A jQuery plugin to make background images draggable.

Configuration

Option	Type	Known Values	Default Value	Description
bound	Boolean	true|false	true	Whether dragging is bounded by the edges of the image.
axis	String	x|y		If specified, restrict dragging along x or y axis.
units	String	pixels|percent	pixels	If the plugin should set the background position using pixels or percentages. Percentages are useful if your image area is responsive and may change size but retain the aspect ratio.
done	Function			Called when dragging is stopped by mouseup, touchup, or mouseleave.

Usage

// default options
$('div').backgroundDraggable();

// only draggable in the x direction, and dragging is not bounded by the image
$('div').backgroundDraggable({ bound: false, axis: 'x' });

// disable draggable background
$('div').backgroundDraggable('disable');

// callback when drag complete
$('div').backgroundDraggable({
  done: function() {
    backgroundPosition = $('div').css('background-position');
    console.log(backgroundPosition);
  }
});

Demo

http://kentor.github.com/jquery-draggable-background/

Support

IE9+. Only background-size value of auto (default) and cover are supported. background-position must be absolute pixels. There will be bugs if you use center for percentages.

Changelog

v1.2.3 [2014-10-17]

• Fixed child elements of element with background dragging calling preventDefault (7f17318).
• Improved behavior of dragging, especially when mouse up happens outside the window (d1fdbe4).

v1.2.2 [2014-09-01]

• Added support for a callback when dragging is finished.

v1.2.1 [2014-08-01]

• Added support for disabling plugin

v1.2 [2014-06-06]

• Refactored code to use semicolons.
• Support for background-size: cover.

v1.1 [2013-05-19]

• Touch support.

v1.0 [2012-09-23]

• Initial release.

License

Copyright (c) 2014 Kenneth Chung

Licensed under the MIT license.