Jquery ui 当隐藏目标区域位于下方时，JQuery UI可排序项未检测到固定目标区域

我正在尝试创建一个固定位置可排序菜单，其中右侧的目标区域可以在固定菜单后面进行水平滚动。我面临的问题是，当我试图将一个项目从固定菜单拖到一个目标或反之亦然时，它工作得非常好，直到我滚动并且目标区域位于固定菜单后面。发生这种情况时，将项目拖到固定菜单不起作用，因为该项目会被拖到固定菜单后面的目标区域

下面是一个JSFIDLE演示了这个问题：

（注意：可能需要展开视图才能正确滚动表格）

• 我可以从“固定菜单”拖动到“可排序1”
• 我可以从“可排序1”拖动到“固定菜单”
• 当我滚动到“可排序6”并尝试将“项目31”拖动到“固定菜单”时，它会下降到它后面的一个其他可排序项目

---

我也尝试过将其移植到固定div，但运气不佳。有什么想法吗？

这似乎是一个问题，可排序界面选择的是后面的列表，而不是前面的列表

这里有一个可行的解决方案。每当滚动时，等待查看此人是否已停止滚动。然后计算某个列是否被固定列覆盖，如果是，则将其更改为不可排序，否则使其可排序

这是小提琴：

我在前面的提琴中添加的主要功能如下：

var isColliding = function( $element1, $element2 ) {
    var allowableOverlap = 5;

    var element1RightDistance = $element1.offset().left 
    + $element1.outerWidth( true );

    //Only care if the Right border of the fixed column is overtop the scrollable column
    return (element1RightDistance > $element2.offset().left + allowableOverlap );
};

$('tbody').scroll(function() {
    clearTimeout($.data(this, 'scrollTimer'));
    //Don't call the function unless stopped for a little bit.
    $.data(this, 'scrollTimer', setTimeout(function() {
      $('.scrollableColumn').each(function(index, element){
        var $element = $(element);
        var colliding = isColliding($('.fixedColumn'), $element);
        $element.find('.sortable').sortable( "option", "disabled", colliding );
      })
    }, 250));
});

table {
  position: relative;
  width: 200px;
  overflow: hidden;
  border-collapse: collapse;
}

ul {
  padding: 0px;
  margin: 0px;
  height: 200px;
}

li {
  list-style-type: none;
}

thead {
  position: relative;
  display: block;
  width: 300px;
  overflow: visible;
}

thead th {
  background-color: grey;
  min-width: 120px;
  border: 1px solid #222;
}

thead th:nth-child(1) {
  position: relative;
  display: block;
}

tbody {
  position: relative;
  display: block;
  width: 700px;
  height: 239px;
  overflow: scroll;
}

tbody td {
  min-width: 120px;
  border: 1px solid #222;
  height: 200px;
  vertical-align: top;
  background-color: white;
}

tbody tr td:nth-child(1) {
  position: relative;
  display: block;
  vertical-align: top;
}

$(document).ready(function() {
  $('tbody').scroll(function(e) {
    $('thead').css("left", -$("tbody").scrollLeft());
    $('thead th:nth-child(1)').css("left", $("tbody").scrollLeft());
    $('tbody td:nth-child(1)').css("left", $("tbody").scrollLeft());
  });

  $('.sortable').sortable({
    connectWith: '.sortable',
    scroll: false,
    helper: 'clone',
    appendTo: 'body',
  });
});

var isColliding = function( $element1, $element2 ) {
    var allowableOverlap = 5;

    var element1RightDistance = $element1.offset().left 
    + $element1.outerWidth( true );

    //Only care if the Right border of the fixed column is overtop the scrollable column
    return (element1RightDistance > $element2.offset().left + allowableOverlap );
};

$('tbody').scroll(function() {
    clearTimeout($.data(this, 'scrollTimer'));
    //Don't call the function unless stopped for a little bit.
    $.data(this, 'scrollTimer', setTimeout(function() {
      $('.scrollableColumn').each(function(index, element){
        var $element = $(element);
        var colliding = isColliding($('.fixedColumn'), $element);
        $element.find('.sortable').sortable( "option", "disabled", colliding );
      })
    }, 250));
});