Simple and Touch-Enabled jQuery Draggable Background Plugin

A simple and touch-enabled jQuery plugin that allows you to make the background of a html container draggable.

How to use it:

1. Include jQuery library and jQuery Draggable Background on the web page

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script src="draggable_background.js"></script>

2. Create a container with a background image

<div id="demo" style="background:url('http://pipsum.com/640x480.jpg')">default</div>

3. Call the plugin with options

<script>
$(function() {
  $('#demo').backgroundDraggable({ axis: 'x' })
})
</script>

4. All the options

<script>
$(function() {
  $('#demo').backgroundDraggable({ 
  bound: false, // Whether dragging is bounded by the edges of the image.
  axis: 'x' // 'x' or 'y', If specified, restrict dragging along x or y axis.
  })
})
</script>

Change logs:

2014-12-18

• v1.2.4

2014-10-18

• change which handlers to remove when disabling plugin

2014-09-01

• Add mouseleave event for unbinding drag

2014-08-02

• Added support for disabling plugin

2014-06-07

• refactor: if/else structure

---

This awesome jQuery plugin is developed by kentor. For more Advanced Usages, please check the demo page or visit the official website.