A jQuery plugin for draggable background images.
JavaScript HTML
Switch branches/tags
Nothing to show
Latest commit edbe3d9 Jul 5, 2015 Kenneth Chung Kenneth Chung Update readme
Permalink
Failed to load latest commit information.
README.md Update readme Jul 6, 2015
draggable_background.js Update version to 1.2.4 Dec 18, 2014
index.html refactor: add semicolons to index.html Jun 7, 2014

README.md

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.