Added ability to specify units as "pixels" or "percentage"

README.md

@@ -25,6 +25,13 @@ A jQuery plugin to make background images draggable.
     <td></td>
     <td>If specified, restrict dragging along x or y axis.</td>
   </tr>
+  <tr>
+    <td>units</td>
+    <td>String</td>
+    <td>pixels|percent</td>
+    <td>pixels</td>
+    <td>If the plugin should set the background position using pixels or percentages. Percentages are useful if your image area is responsive and may change size but retain the aspect ratio.</td>
+  </tr>
   <tr>
     <td>done</td>
     <td>Function</td>

draggable_background.js

@@ -75,7 +75,7 @@
 
     // Get the image's width and height if bound
     var imageDimensions = { width: 0, height: 0 };
-    if (options.bound) {
+    if (options.bound || options.units == 'percent') {
       imageDimensions = getBackgroundImageDimensions($el);
     }
 
@@ -97,6 +97,12 @@
           xPos = parseInt(pos[1]) || 0,
           yPos = parseInt(pos[2]) || 0;
 
+      // We must convert percentage back to pixels
+      if (options.units == 'percent') {
+        xPos = Math.round(xPos / -200 * imageDimensions.width);
+        yPos = Math.round(yPos / -200 * imageDimensions.height);
+      }
+
       $window.on('mousemove.dbg touchmove.dbg', function(e) {
         e.preventDefault();
 
@@ -107,12 +113,22 @@
         var x = e.clientX,
             y = e.clientY;
 
-        xPos = options.axis === 'y' ? xPos : limit($el.innerWidth()-imageDimensions.width, 0, xPos+x-x0, options.bound);
-        yPos = options.axis === 'x' ? yPos : limit($el.innerHeight()-imageDimensions.height, 0, yPos+y-y0, options.bound);
+        if (options.units == 'percent') {
+          xPos = options.axis === 'y' ? xPos : limit(-imageDimensions.width/2, 0, xPos+x-x0, options.bound);
+          yPos = options.axis === 'x' ? yPos : limit(-imageDimensions.height/2, 0, yPos+y-y0, options.bound);
+
+          // Convert pixels to percentage
+          $el.css('background-position', xPos / imageDimensions.width * -200 + '% ' + yPos / imageDimensions.height * -200 + '%');
+        } else {
+          xPos = options.axis === 'y' ? xPos : limit($el.innerWidth()-imageDimensions.width, 0, xPos+x-x0, options.bound);
+          yPos = options.axis === 'x' ? yPos : limit($el.innerHeight()-imageDimensions.height, 0, yPos+y-y0, options.bound);
+
+          $el.css('background-position', xPos + 'px ' + yPos + 'px');
+        }
+
         x0 = x;
         y0 = y;
 
-        $el.css('background-position', xPos + 'px ' + yPos + 'px');
       });
 
       $window.on('mouseup.dbg touchend.dbg mouseleave.dbg', function() {
@@ -152,6 +168,7 @@
 
   $.fn.backgroundDraggable.defaults = {
     bound: true,
-    axis: undefined
+    axis: undefined,
+    units: 'pixels'
   };
 }(jQuery));

index.html

@@ -13,6 +13,8 @@
       $('#unbounded').backgroundDraggable({ bound: false });
       $('#x').backgroundDraggable({ axis: 'x' });
       $('#y').backgroundDraggable({ axis: 'y' });
+      $('#pixels').backgroundDraggable({ units: 'pixels' });
+      $('#percent').backgroundDraggable({ units: 'percent' });
 
       $('div').each(function() {
         var $this = $(this),
@@ -28,5 +30,8 @@
   <br><br>
   <div id="x" style="background:url('http://pipsum.com/2560x240.jpg')">axis: 'x'</div>
   <div id="y" style="background:url('http://pipsum.com/320x1600.jpg')">axis: 'y'</div>
+  <br><br>
+  <div id="pixels" style="background:url('http://pipsum.com/720x640.jpg')">units: 'pixels'</div>
+  <div id="percent" style="background:url('http://pipsum.com/720x640.jpg')">units: 'percent'</div>
 </body>
 </html>