Odd Draggable Behavior After Implementing Auto Scroll

Question

I've implemented drag and drop using the jQuery UI draggable widget.

I'm now implementing auto scroll during drag operations. I set it up so that when you start to drag, gray overlays appear at the top and bottom of the browser window. When you drag into one of these overlays, the browser window starts to auto scroll.

You can see my test page at http://www.softcircuits.com/Client/scrolltest.html. Drag an item by dragging one of the crosshair icons on the left side.

But there's a problem: if you scroll to the bottom of the page, and then drag an item to the top overlay, it will scroll up as expected. However, for me, I get about half way up the page and the draggable helper won't go any higher. There's no way for me to drag all the way to the top of the page.

This most likely seems related to the Draggable widget. Is anyone able to see why this is happening? I'm using Google Chrome on Windows 7.

Answer 1

Changing the draggable containment option from window to document worked for me.

$('.drag-handle').draggable({ 
    ...
    containment: "document",
    ...
});

See: http://docs.jquery.com/UI/Draggable#option-containment

Answer 2

To be cross-browser compatible and to avoid wird behavior, I would recommend to use all JQueryUI draggable callbacks.

I read some days ago that the last version of Chrome has some really tricky problems with natives HTML5 draggable events.

For example, I have just checked your web page source code and you are using $('.drag-handle').on('drag', function(){...}); => You should use the drag callback.

I would also recommend to not use window as the scrollable container in your case. You should create a div to wrap all the tables contents and use it as a scroll container. I have already done this implementation in the past and it is working.

Don't forget to set the wrapper ID in the containment option durring the draggable widget creation.

If it always not working, you could also try to overwrite the helper position in the drag callback :

//Save the mouse position in global variables
$(document).mousemove(function(e){
   window.mouseXPos = e.pageX;
   window.mouseYPos = e.pageY;
});

$('[id^="drag-"]').each(function() {
    $(this).draggable({
        opacity: 0.7,
        cursorAt: { top: 15, left: 50 },        
        scroll: true,
        stop: function(){},  
        drag : function(e,ui){            
            //Force the helper position
            ui.position.left = window.mouseXPos - $(this).draggable('option','cursorAt').left;
            ui.position.top = window.mouseYPos- $(this).draggable('option','cursorAt').top; 
        });
});