jQuery Draggable: Bild Flicker

Question

Ich habe ein Bild-Panning-Tool entwickelt, und nachdem ein freundliches Mitglied mich an das ziehbare Plugin für jQuery gerichtet hat, habe ich das meiste davon fertiggestellt. Jetzt, wenn der Benutzer das Bild (in einem div von etwa 300px um 300px enthalten) zieht, wird das Bild zuerst flackern, dann schwenken. Dieses Problem scheint nach einem Mouse-Down-Ereignis beim Mausbewegungsereignis zu auftreten. Das Bild wird beim Bewegen der Maus in eine der vier Ecken verschoben, und das Bewegen in bestimmte Bereiche führt zu einer weiteren Verschiebung. Ich konnte nichts über Google finden, und ich bin noch relativ neu bei jQuery.

Ich habe den Code hier hochgeladen, falls meine Beschreibung zu vage: http://www.studentgroups.ucla.edu/csa/test/zoom.htm

Irgendwelche Ideen oder Ratschläge sehr geschätzt wird!

Answer 1

Zum einen haben Sie das Bild sowohl über das jQuery-Plugin als auch Ihren eigenen Code ziehbar gemacht. Ihr Code ändert die background-position der div, und das jQuery-Plugin ändert die div tatsächliche Position. Das wird bestimmt einige Probleme verursachen.

Auch scheint Draggable containment Parameter für ziehbare Elemente, die kleiner als ihre übergeordneten Container sind, nicht diejenigen, die größer sind, als Sie versuchen zu tun.

Anyways, hier ist der Arbeitscode:

$(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); 
     } 
    }); 
}); 

Wenn Sie, nicht kanten Schnappen Sie müssen .bind() Funktion des loswerden können, und .draggable() einfach anrufen.

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