jQuery UI多个可排序列:滚动问题

Question

jQuery:1.9.1

jQuery UI:1.10.1

请看小提琴

            <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>

在小提琴中,当用户试图将list-1中的顶部项目拖动到list-2的底部时,list-1的滚动条将被移动而不是list-2滚动条.

尝试了各种各样的事情,但无法让它正常工作.任何意见/建议都非常感谢.

谢谢,拉克什

Answer 1

如果您不想更改实际的src文件.作为选项的一部分,有一个句柄

请看小提琴

    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;

}
    }