jquery - jQuery UI 多个可排序列：滚动问题

Question

jQuery : 1.9.1

jQuery 用户界面：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;

}
    }

Answer 2

查看 jquery.ui.sortable.js 的 _mouseDrag 函数 //Do scrolling is on scrollParent where parent 是被拖动元素的容器。但是 parent 应该是您将要丢弃的容器。我将滚动更改移动到 this._contactContainers(event); 下方 而不是 this.scrollParent[0]。我使用了 this.currentContainer.element[0] ，它为您提供了实际的容器并工作了..

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();
    }
  }
});

Answer 4

可能您的可排序列表垂直重叠。请参阅https://bugs.jqueryui.com/ticket/7065。

只需使用静态维度将可排序列表放置在彼此下方。