Rakesh Kumar Cherukuri Rakesh Kumar Cherukuri - 5 months ago 15
jQuery Question

jQuery UI multiple sortable columns : issue with scrolling

jQuery : 1.9.1

jQuery UI : 1.10.1

Please See The Fiddle

<td class="my-column" >
<div id="my-div1" class="my-div-class">
<p class="para-item"> para 101 </p>
</div>
</td>
<td>
<div id="my-div1" class="my-div-class">
<p class="para-item"> para 201 </p>
</div>
</td>

<script>
$(".my-div-class").sortable( { connectWith: '.my-div-class' } );
</script>


In the fiddle, when user tries to drag top item in list-1 into bottom of list-2, the scroll bar of list-1 gets moved instead of list-2 scroll bar.

Tried various things but couldnt make it to work properly. Any inputs/suggestions are much appreciated.

Thanks,
Rakesh

Answer

If you don't want to change the actual src file. There is a handle as part of the option

please see the fiddle

    sort:function(event,uiHash){

    var scrollContainer = uiHash.placeholder[0].parentNode;
        var overflowOffset = $(scrollContainer).offset();
    if((overflowOffset.top + scrollContainer.offsetHeight) - event.pageY < scrollingSensitivity) {
scrollContainer.scrollTop = scrollContainer.scrollTop + scrollingSpeed;
    } 
    else if(event.pageY - overflowOffset.top < scrollingSensitivity) {
        scrollContainer.scrollTop = scrollContainer.scrollTop - scrollingSpeed;
    }
    if((overflowOffset.left + scrollContainer.offsetWidth) - event.pageX < scrollingSensitivity) {
scrollContainer.scrollLeft = scrollContainer.scrollLeft + scrollingSpeed;
    } 
    else if(event.pageX - overflowOffset.left < scrollingSensitivity) {
        scrollContainer.scrollLeft = scrollContainer.scrollLeft - scrollingSpeed;

}
    }
Comments