jquery UI draggable jumps on screen scroll

Question

My jquery UI draggable is working great, except when I try to drag something off-screen, causing the screen to scroll. Then the selected item jumps to who knows where - you can't see it anymore. Anyone know how I can troubleshoot this? Thank you.

Right now we are on jquery-ui-1.8.24 and jquery-1.8.2

Answer 1

After failing to find a solution for this with jQuery, I implemented my own drag - works good for me. It also allowed me to remove jQuery UI, which was great. Notice that draggable and handle are jquery elements, and limits is an object. Here is the code -

function initializeDrag(draggable, handle, limits) {
                            var initialMousePosition, initialDraggablePosition;
                            handle.on('mousedown', function (e) {
                                initialMousePosition = {
                                    x: e.pageX,
                                    y: e.pageY
                                };
                                initialDraggablePosition = {
                                    top: parseInt(draggable.css('top'), 10),
                                    left: parseInt(draggable.css('left'), 10)
                                }
                                document.addEventListener('mousemove', onMouseMove);
                                document.addEventListener('mouseup', onMouseUp);
                            });

                            function onMouseMove(e) {
                                var verticalDelta = e.pageY - initialMousePosition.y;
                                var horizontalDelta = e.pageX - initialMousePosition.x;
                                var topRes = initialDraggablePosition.top + verticalDelta;
                                var leftRes = initialDraggablePosition.left + horizontalDelta;
                                topRes = Math.max(topRes, limits.top);
                                topRes = Math.min(topRes, limits.bottom);
                                leftRes = Math.max(leftRes, limits.left);
                                leftRes = Math.min(leftRes, limits.right);

                                draggable.css({
                                    top: topRes + 'px',
                                    left: leftRes + 'px'
                                });
                            }

                            function onMouseUp() {
                                document.removeEventListener('mousemove', onMouseMove);
                                document.removeEventListener('mouseup', onMouseUp);
                            }
                        }

Answer 2

Notice that the element style which you are appendTo should be position: relative When using jQuery-ui draggable

Answer 3

http://jsfiddle.net/g4xHG/

If you set the overflow property on the body element, this problem goes away. No idea why.

body {
    overflow: auto;
}