Simple and Touch-Enabled jQuery Draggable Background Plugin

File Size: 4.46 KB
Views Total: 3940
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
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=""></script>
<script src="draggable_background.js"></script>

2. Create a container with a background image

<div id="demo" style="background:url('')">default</div>

3. Call the plugin with options

$(function() {
  $('#demo').backgroundDraggable({ axis: 'x' })

4. All the options

$(function() {
  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.

Change logs:


  • v1.2.4


  • change which handlers to remove when disabling plugin


  • Add mouseleave event for unbinding drag


  • Added support for disabling plugin


  • 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.