滚动容器时元素拖动出错

Question

In this Fiddle , I made the red container draggable. As you can see, this is working fine but when the green container ( parent container ) is scrolled a bit and then the red container is dragged, the dragging is not happening at correct position.

Can someone please tell me what could be the problem?

I tried e.pageX , e.clientX and e.offsetX but still couldn't able to fix this. ( or maybe I missed something )

Answer 1

You need to add the scrolling top position to your shape. If you want your square stay on the correct position check that:

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