JQuery UI: Containment on draggable element is buggy

Question

A site I'm working on has an image zoom, and the zoomed image is draggable.

The problem is that on the current version you can zoom in and then drag the image totally out of the viewable area.

See: htt p://testing.successfulsites.co.uk/s5/1.3.5.1.html (and zoom in)

(sorry about the gap in the URL - I'm a new user so can't post more than 1 link!)

So, I've been trying to get the image to be contained.

The approach I've taken is to use containment on a div which I'm creating and resizing, based on the current zoom level.

The div is wrapped around the zoom-container div, and has negative margins and positive padding, in order to position itself correctly.

See: http://testing.successfulsites.co.uk/s6/1.3.5.1.html (and zoom in)

Note: I haven't bothered with the containment functionality on "zoom out" - until the issue is fixed.

I've added CSS in so that you can see the various divs involved.

The issue I'm having is that when you zoom in and drag the image it's contained - but ONLY until you let your finger off the mouse button .. and then the containment area seems to reset and even jump - meaning you can move the image off the viewing area still - just not in one go.

The JS file is here:

htt p://testing.successfulsites.co.uk/s6/assets/js/functions.js

The CSS is here:

htt p://testing.successfulsites.co.uk/s6/assets/style/main.css

Here's the relevant code:

In the following function...

$("#in").live("click",function () {

I have the following code...

if(currentZoom > 1) {
 if ($('#zoom-meta-container').length == 0) {
  $('#zoom-container').wrap('<div id="zoom-meta-container"></div>');
  var container = $('#zoom-meta-container');
  $('#zoom-container a').draggable({ containment: container });
  $('#zoom-container').addClass('drag-cursor');
 };
 switch (currentZoom) {
  case 1:  
  container.css('margin','-20% 0 0 -20%').css('padding','20%');
  break;

  case 2:  
  container.css('margin','-90% 0 0 -90%').css('padding','90%');
  break;

  case 3:  
  container.css('margin','-160% 0 0 -160%').css('padding','160%');
  break;

  case 4:  
  container.css('margin','-210% 0 0 -210%').css('padding','210%');
  break;
 };

Any ideas..

a) What I'm doing wrong

b) If there's a better approach to the original problem

Answer 1

This may be beyond the design of the containment option. I would try doing custom containment by using return false in a drag callback.