Droppable container not scrolling correctly in JQuery UI

Question

I'm encountering a Problem with JQuery UI. As it can be seen in my snippet, i can drag a elements onto Fields. When I hover over the field the corresponding field is highlighted in green.

Now I added the ability to scroll with the draggable selected. I can scroll up and down when hovering over the bottom or top with the draggable.

The Problem is, that the highlighting does not work correctly after scroll. When hovering over the fields the wrong fields are highlighted, although they are not at that position anymore.

What can I do here?

 $(document).ready(function() { //alert($('.dragItem').text()); $('.dragItem').draggable({ cursor: "-webkit-grabbing", helper: 'clone', revertDuration: 500, revert: true, appendTo: 'body', opacity: 1.0, start: function(event, ui) {}, stop: function(event, ui) {} }); var left = $('#dropArea'); var height = left.height() * 2.5; $('.upper').droppable({ over: function(event, ui) { left.animate({ scrollTop: 0 }, 900, 'linear'); }, out: function(event, ui) { left.stop(); } }); $('.lower').droppable({ over: function(event, ui) { value = height; left.animate({ scrollTop: value }, 900, 'linear'); /*$('#tbLeftInner').autoscroll({ direction: 'down', step: 150, scroll: true });*/ }, out: function(event, ui) { left.stop(); } }); $('.dropField').droppable({ scroll: true, accept: '.dragItem', drop: function(ev, ui) { $(this).removeClass('tbDrop'); $(this).effect("highlight", { color: '#97d700' }, 1000); $(ui.helper).remove(); $(ui.draggable).remove(); }, over: function(ev, ui) { $(this).addClass('tbDrop'); //$(this).css('background-color', '#97d700 !important'); }, out: function(ev, ui) { $(this).removeClass('tbDrop'); //$(this).css('background-color', 'none'); } }); }); 

 #main { width: 200px; overflow: scroll; float:left; margin-left: 50px; } #dragArea { width: 200px; margin-bottom: 20px; float: left; } .dragItem { background-color: blue; color: white; border: green 1px solid; } #dropArea { width: 200px; height: 200px; overflow: scroll; position: absolute; } .dropField { background-color: white; height: 40px; border: green 1px solid; } .upper, .lower { position: absolute; height: 20px; width: 200px; background: rgba(50, 50, 50, .2); z-index: 10; } .lower { margin-top: 180px; } .tbDrop { background-color: #97d700 !important; } 

 <script src="https://code.jquery.com/jquery-2.1.4.min.js"></script> <script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script> <div id="dragArea"> <div class="dragItem">Drag 1</div> <div class="dragItem">Drag 2</div> <div class="dragItem">Drag 3</div> </div> <div id="main"> <div class="upper"></div> <div class="lower"></div> <div id="dropArea"> <div class="dropField">Field 1</div> <div class="dropField">Field 2</div> <div class="dropField">Field 3</div> <div class="dropField">Field 4</div> <div class="dropField">Field 5</div> <div class="dropField">Field 6</div> <div class="dropField">Field 7</div> <div class="dropField">Field 8</div> </div> </div> 

Answer 1

I found solution here. JqueryUI, drag elements into cells of a scrolling dropable div containing large table

In my setup i would had to change the draggable.

$('.dragItem').draggable({
    cursor: "-webkit-grabbing",
    revertDuration: 500,
    revert: true,
    appendTo: 'body',
    opacity: 1.0,
        helper: function(event) {
            var innerHtml = $('.dragitem').html();
            $('#dragArea').append('<div id="clone">'+ innerHtml +'</div>');
            var clone = $("#clone");
            clone.hide();
            setTimeout(function(){
                clone.appendTo('body'); 
                clone.show();
            },1);
            return clone;
        },
    start: function(event, ui) {},
    stop: function(event, ui) {}
});