Simple and Touch-Enabled jQuery Draggable Background Plugin

File Size: 4.46 KB
Views Total: 3988
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="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.