jquery перетаскиваемый возврат не является идеальным пикселем

Question

Я экспериментирую с jQuery draggable.При перетаскивании и возврате, возврат не всегда помещает перетаскиваемый объект точно туда, где он был начат - он может быть на несколько пикселей.

$(".formsection").draggable({
    grid: [20, 20],
    revert: true, 
    zIndex: 9700,
}); 

css

.formsection{position:absolute; top:20px; left:20px; width: 220px; height: 80px; padding: 5px; float: left; margin: 0 10px 10px 0; font-size: .9em; 
             background-color:#eee; border:solid 1px green; }

Кажется, это работает в первый раз, но если перетаскивать во второй раз, это всегда, но непоследовательно.Кто-нибудь знает, как исправить?

Answer 1

Это известная ошибка в пользовательском интерфейсе jQuery с "revert" и "grid". В комментариях к ошибке есть уродливый обходной путь, но он включает изменение самого пользовательского интерфейса jQuery.

Я создал гораздо более простой обходной путь:

$(".formsection").draggable({
    grid: [20, 20],
    zIndex: 9700,
    stop: function(event, ui) {
        this._originalPosition = this._originalPosition || ui.originalPosition;
        ui.helper.animate( this._originalPosition );
    }
});

При первом перетаскивании Draggable он сохраняет orginalPosition, потому что это единственный раз, когда он корректен, а затем последовательно использует метод animate с сохраненной позицией вместо использования встроенного «revert».

Пример для jsfiddle

Answer 2

Я решил это так:

$( ".formsection" ).bind( "dragstart", function(event, ui) {
    ui.originalPosition.top = $(this).position().top;
    ui.originalPosition.left = $(this).position().left;
});

Преимущества этого метода в том, что вы все еще можете использовать встроенную функцию возврата перетаскиваемого (и сбрасываемого)