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.
