jQuery Draggable: Image Flicker

Question

I've been developing an Image panning tool, and after a kind member directed me to the draggable plugin for jQuery, I have most of it completed. Right now if the user drags the image (contained inside a div of about 300px by 300px), the image will first flicker, then pan. This problems seems to occur after a mouse down event, on the mouse move event. The image will shift into one of the four corners on mouse move, and moving to certain areas will cause another shift. I haven't been able to find anything through google, and I'm relatively new to jQuery still.

I've uploaded the code here, in case my description is too vague: http://www.studentgroups.ucla.edu/csa/test/zoom.htm

Any ideas or advice is greatly appreciated!

Answer 1

For one, you've made the image draggable both via the jQuery plugin, and your own code. Your code is changing the background-position of the div, and the jQuery plugin is changing the div's actual position. That's bound to cause some problems.

Also, Draggable's containment parameter seems to be designed for draggable items who are smaller than their parent container, not ones who are bigger, like you're trying to do.

Anyways, here's the working code:

$(document).ready(function() {
    $(".draggable").draggable().bind('dragstop', function(e, ui) {
        if (ui.position.top > 0) {
            $(this).css('top', 0);
        }
        if (ui.position.left > 0) {
            $(this).css('left', 0);
        }

        var bottom = -($(this).height() - $(this).parent().height()),
        right  = -($(this).width() - $(this).parent().width());

        if (ui.position.top < bottom) {
            $(this).css('top', bottom);
        }
        if (ui.position.left < right) {
            $(this).css('left', right);
        }
    });
});

If you don't need edge-snapping, you can get rid of the .bind() function, and just call .draggable().

$(document).ready(function() {
    $(".draggable").draggable();
});