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.