Odd drag and drop after implementing auto scroll

Question

I implemented drag and drop using jQuery UI draggable widget .

Now I am doing auto scroll during drag and drop operations. I set it so that when dragging, gray overlays are displayed at the top and bottom of the browser window. When you drag to one of these overlays, the browser window starts to scroll automatically.

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

But there is a problem: if you go to the bottom of the page and then drag the item to the top layer, it will scroll as expected. However, for me, I get about half the page, and the drag-and-drop helper will not be higher. Cannot drag to the very top of the page.

This is most likely due to the Draggable widgets. Can anyone understand why this is happening? I am using Google Chrome on Windows 7.

Answer 1

Changing the drag-and-drop restraint 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 compatible with multiple browsers and avoid behavior, I would recommend using all jQueryUI drag and drop callbacks .

I read a few days ago that the latest version of Chrome has some very complex problems with native events that drag HTML5.

For example, I just checked the source code of your web page and you use $('.drag-handle').on('drag', function(){...}); => You must use drag Callback.

I would also recommend not using window as a scrollable container in your case. You must create a div to wrap the entire contents of the tables and use it as a scroll container. I have already done this implementation in the past and it works.

Remember to set the wrapper identifier in the containment option, delaying the creation of the widget for the dragged file.

If it always does not work, you can also try to overwrite the auxiliary 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; }); });