jQuery Draggable: мерцание изображения - PullRequest
Новая
       6

jQuery Draggable: мерцание изображения

0 голосов
/ 20 августа 2009

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

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

Любые идеи или советы приветствуются!

1 Ответ

1 голос
/ 21 августа 2009

Например, вы сделали изображение перетаскиваемым как с помощью плагина jQuery, так и с помощью собственного кода. Ваш код меняет background-position div, а плагин 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();
});
...