jQuery Draggable: Изображение Flicker

Question

Я разрабатывал инструмент панорамирования изображения, и после того, как добрый член направил меня к перетаскиваемому плагину для jQuery, у меня есть большая часть его завершена. Прямо сейчас, если пользователь перетаскивает изображение (содержится внутри div размером около 300 пикселей на 300 пикселей), изображение сначала мерцает, а затем панорамируется. Кажется, что эти проблемы происходят после события мыши вниз, на событии перемещения мыши. Изображение сдвинется в один из четырех углов движения мыши, и перемещение в определенные области вызовет другой сдвиг. Я не смог найти ничего через Google, и я относительно новичок в jQuery.

Я загрузил код здесь, в случае, если мое описание слишком расплывчато: http://www.studentgroups.ucla.edu/csa/test/zoom.htm

Любые идеи или советы с благодарностью!

Answer 1

Во-первых, вы сделали изображение перетаскиваемым как через плагин jQuery, так и свой собственный код. Ваш код меняет background-positiondiv, а плагин jQuery изменяет фактическое положение div. Это обязательно вызовет некоторые проблемы.

Кроме того, параметр Draggable containment, как представляется, предназначен для перетаскиваемых элементов, которые меньше, чем их родительский контейнер, а не те, кто больше, как вы пытаетесь сделать.

В любом случае, вот рабочий код:

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

Если вам не нужны реберные щелчки, вы можете избавиться от функции .bind(), а просто позвонить .draggable().

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