Перетаскивание элемента происходит неправильно при прокрутке контейнера

Question

В этом Fiddle я сделал красный контейнер перетаскиваемым. Как вы можете видеть, это работает нормально, но когда зеленый контейнер (родительский контейнер) прокручивается немного, а затем красный контейнер перетаскивается, перетаскивание не происходит в правильном положении.

Может кто-нибудь, пожалуйста, сообщите мне, что может быть проблемой?

Я пробовал e.pageX, e.clientX и e.offsetX, но все еще не мог это исправить. (или, возможно, я пропустил что-то)

Answer 1

Вам нужно добавить верхнее положение прокрутки в вашу форму. Если вы хотите, чтобы ваш квадрат пребывание в правильном положении, проверьте, что:

function repositionShape(e) { 
    $self = repositionStart.self; 
    $commentSection = repositionStart.commentSection; 

    var dy = $('.wrapper').scrollTop(); // Get wrapper scroll position 

    $self.css({ 
    'left': e.clientX - repositionStart.offset.left, 
     'top': e.clientY - repositionStart.offset.top +dy // Add delta to your square position 
    }); 
}