Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/kentor/jquery-draggable-background
A jQuery plugin for draggable background images.
https://github.com/kentor/jquery-draggable-background
Last synced: about 17 hours ago
JSON representation
A jQuery plugin for draggable background images.
- Host: GitHub
- URL: https://github.com/kentor/jquery-draggable-background
- Owner: kentor
- Created: 2012-09-24T00:43:35.000Z (about 12 years ago)
- Default Branch: master
- Last Pushed: 2016-06-04T01:28:15.000Z (over 8 years ago)
- Last Synced: 2024-04-09T23:12:36.435Z (7 months ago)
- Language: JavaScript
- Homepage: https://github.com/kentor/jquery-draggable-background
- Size: 304 KB
- Stars: 97
- Watchers: 6
- Forks: 53
- Open Issues: 7
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# 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
```js
// 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](http://www.opensource.org/licenses/mit-license.php) license.