A repository of over 1000 quality jQuery plugins

jQuery jQuery Draggable Background

jQuery Draggable Background is a jQuery Images plugin.

Created by Kentor

A jQuery plugin for draggable background images.

Not what you're looking for? Click here to view more Images jQuery plugins

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.



You might also like these other Images jQuery Plugins