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

【问题标题】：JQuery UI Sortable item is not detecting a fixed target area when a hidden target area is underneath当隐藏目标区域位于下方时，JQuery UI 可排序项目未检测到固定目标区域
【发布时间】：2019-11-26 17:04:47
【问题描述】：

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

这是一个演示问题的 jsfiddle：

https://jsfiddle.net/geraldclark/ojkgbLv9/45/

<body>
  <table>
    <thead>
      <tr>
        <th>Fixed Menu</th>
        <th>Sortable 1</th>
        <th>Sortable 2</th>
        <th>Sortable 3</th>
        <th>Sortable 4</th>
        <th>Sortable 5</th>
        <th>Sortable 6</th>
        <th>Sortable 7</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>
          <ul class="sortable">
            <li>Item 1</li>
            <li>Item 2</li>
            <li>Item 3</li>
            <li>Item 4</li>
            <li>Item 5</li>
          </ul>
        </td>
        <td>
          <ul class="sortable">
            <li>Item 6</li>
            <li>Item 7</li>
            <li>Item 8</li>
            <li>Item 9</li>
            <li>Item 10</li>
          </ul>
        </td>
        <td>
          <ul class="sortable">
            <li>Item 11</li>
            <li>Item 12</li>
            <li>Item 13</li>
            <li>Item 14</li>
            <li>Item 15</li>
          </ul>
        </td>
        <td>
          <ul class="sortable">
            <li>Item 16</li>
            <li>Item 17</li>
            <li>Item 18</li>
            <li>Item 19</li>
            <li>Item 20</li>
          </ul>
        </td>
        <td>
          <ul class="sortable">
            <li>Item 21</li>
            <li>Item 22</li>
            <li>Item 23</li>
            <li>Item 24</li>
            <li>Item 25</li>
          </ul>
        </td>
        <td>
          <ul class="sortable">
            <li>Item 26</li>
            <li>Item 27</li>
            <li>Item 28</li>
            <li>Item 29</li>
            <li>Item 30</li>
          </ul>
        </td>
        <td>
          <ul class="sortable">
            <li>Item 31</li>
            <li>Item 32</li>
            <li>Item 33</li>
            <li>Item 34</li>
            <li>Item 35</li>
          </ul>
        </td>
        <td>
          <ul class="sortable">
            <li>Item 36</li>
            <li>Item 37</li>
            <li>Item 38</li>
            <li>Item 39</li>
            <li>Item 40</li>
          </ul>
        </td>
      </tr>

    </tbody>
  </table>
</body>

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',
  });
});

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

我可以从“Fixed Menu”拖动到“Sortable 1”
我可以从“Sortable 1”拖动到“Fixed Menu”
当我滚动到“Sortable 6”并尝试将“Item 31”拖到“Fixed Menu”时，它会掉到它后面的其他可排序项目之一。

我也尝试将其移植到固定的 div 中，但没有成功。有什么想法吗？

【问题讨论】：

标签： jquery-ui jquery-ui-sortable

【解决方案1】：

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

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

这是小提琴： https://jsfiddle.net/kd8zpo96/1/

我在上一个小提琴中添加的主要功能是这样的：

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

【讨论】：