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

Question

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>

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

尝试了各种方法，但都不能正常工作。任何意见/建议都是非常感谢的。

谢谢，Rakesh

Answer 1

如果您不想更改实际的src文件。选项中有一个句柄

请参阅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;

}
    }

Answer 2

查看jquery.ui.sortable.js //的_mouseDrag函数，在scrollParent上执行滚动，其中父元素是被拖动元素的容器。但是parent应该是你将要放置的容器。我将滚动更改移到了this._contactContainers(event)；下面，而不是this.scrollParent。我使用了this.currentContainer.element，它为您提供了实际的容器，并且工作正常。

if(this.scrollParent[0] !== document && this.scrollParent[0].tagName !== "HTML") {
   this.overflowOffset = this.currentContainer.element.offset();
   var scrollContailer = this.currentContainer.element[0];
   if((this.overflowOffset.top + scrollContailer.offsetHeight) - event.pageY < o.scrollSensitivity) {
    scrollContailer.scrollTop = scrolled = scrollContailer.scrollTop + o.scrollSpeed;
   } else if(event.pageY - this.overflowOffset.top < o.scrollSensitivity) {
    scrollContailer.scrollTop = scrolled = scrollContailer.scrollTop - o.scrollSpeed;
   }
   if((this.overflowOffset.left + scrollContailer.offsetWidth) - event.pageX < o.scrollSensitivity) {
    scrollContailer.scrollLeft = scrolled = scrollContailer.scrollLeft + o.scrollSpeed;
   } else if(event.pageX - this.overflowOffset.left < o.scrollSensitivity) {
    scrollContailer.scrollLeft = scrolled = scrollContailer.scrollLeft - o.scrollSpeed;
   }

}

Answer 3

一个更简单的解决方案是下面的代码：

$("#foo, #bar").sortable({
  connectWith: ".foobar",
  over: function(event, ui) {
    if (ui.sender) {
      widget = ui.sender.data("ui-sortable");
      widget.scrollParent = $(this);
      widget.overflowOffset = $(this).offset();
    }
  }
});