Draggable Background

A jQuery plugin to make background images draggable.

NOTE: I don't plan to maintain this library anymore since I've moved on from jQuery. There seems to be requests for supporting different options for background-size or different units for background-position. After looking at the css spec for these properties, it seems unmaintainable to support every possible configuration, so I would encourage you to fork this and shape it to your specific needs.

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.
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.