Mam wiele elementów (zmienne tagi href) w div z ustawioną wysokością / szerokością, z przewijaniem ustawionym naoverflow: auto w CSS.

Taka jest struktura div:

<div id="tagFun_div_main">
<div id="tf_div_tagsReturn">
    <!-- all the draggable elements go in here, the parent div scolls -->
</div>
<div id=" tf_div_tagsDrop">
    <div id="tf_dropBox"></div>
</div></div>

nadrzędne div, 'tf_div_tagsReturn' i 'tf_div_tagsDrop' będą ostatecznie unosić się obok siebie.

Oto jQuery, które jest uruchamiane po utworzeniu wszystkich elementów „przeciągalnych” z nazwą klasy „tag_cell”,:

$(function() {
    $(".tag_cell").draggable({ 
        revert: 'invalid', 
        scroll: false,
        containment: '#tagFun_div_main'
    });
    $("#tf_dropBox").droppable({
        accept: '.tag_cell',
        hoverClass: 'tf_dropBox_hover',
        activeClass: 'tf_dropBox_active',
        drop: function(event, ui) {
            GLOBAL_ary_tf_tags.push(ui.draggable.html());
            tagFun_reload();
        }
    });
}); 

jak już wspomniałem powyżej, przeciągalne elementy można przeciągać w obrębie div 'tf_div_tagsReturn', ale nie przeciągają wizualnie poza ten nadrzędny div. warto zauważyć, że jeśli przeciągam jeden z elementów przeciągalnych i przesuwasz kursor myszy nad div, który można upuszczać, z id 'tf_dropBox', wtedy hoverclass jest uruchamiany, po prostu nie widzę już elementu przeciągalnego.

To jest moje pierwsze uruchomienie przy użyciu jQuery, więc mam nadzieję, że brakuje mi czegoś bardzo oczywistego. Dotychczas przeczytałem dokumentację i przeszukiwałem fora bez żadnych zastrzeżeń :(

AKTUALIZACJA:

Wielkie dzięki dla Jabes88 za dostarczenie rozwiązania, które pozwoliło mi osiągnąć funkcjonalność, której szukałem. Oto, jak wyglądał mój jQuery:

$(function() {
    $(".tag_cell").draggable({ 
        revert: 'invalid', 
        scroll: false,
        containment: '#tagFun_div_main',
        helper: 'clone',
        start : function() {
        this.style.display="none";
        },
        stop: function() {
        this.style.display="";
        }
    });
    $(".tf_dropBox").droppable({
        accept: '.tag_cell',
        hoverClass: 'tf_dropBox_hover',
        activeClass: 'tf_dropBox_active',
        drop: function(event, ui) {
            GLOBAL_ary_tf_tags.push(ui.draggable.html());
            tagFun_reload();
        }
    });
});