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文件。作为选项

的一部分，有一个句柄

请参阅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 [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。

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

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

4 个答案: