There is no excessive effect after switching div (jquery draggable / droppable)

Question

I use jquery draggable and droppable to implement the drag'n'drop function: There are two tabs, each of which contains a zone with drag and drop with draggable elements. Now I can select the draggable transition to another tab - the tab changes when I move the tab while dragging. (Same as MS WinExplorer, if you move a file from one directory to another ...). To indicate that the user is above the drop zone, I use the hoverClass parameter.

Problem: After changing tabs several times when dragging, the hover effect is absent. If the browser size requires scroll bars, and I move the pointer with a drag on one of the borders of the browser (so that the browser scrolls) the effect of hovering is displayed .... I added an excess event to droppable to check if it is always fired, but this not this way.

$('.drag').draggable({ revert: 'invalid', helper: function () { return $('<div></div>').addClass('drag-dragging').appendTo('body').text($(this).text()); } }); $('#panel-1-droppable,#panel-2-droppable').droppable({ accepts: 'drag', hoverClass: 'panel-dropover', over: function () { // just to check the over-event $('#over-state').text('Mouseover with draggable [' + $(this).attr('id') + ']'); } }); $('.panel-tab').droppable({ over: function () { // changing tab... } }); 

I created a test script to reproduce the problem: http://jsfiddle.net/CKYJs/5/

I hope that I have provided all the necessary information ...

Answer 1

Problem solved setting refreshPositions to TRUE.

http://api.jqueryui.com/draggable/#option-refreshPositions