当隐藏的目标区域在下面时，JQuery UI Sortable项未检测到固定的目标区域

问题描述 投票：0回答：1

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

这里是一个演示问题的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',
  });
});

（（注：您可能需要扩展视图以使表格正确滚动）

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

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

jquery-ui jquery-ui-sortable
1个回答
0
投票

这似乎与可排序界面选择后退列表而不是要放入的前列表有关。

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

这里是小提琴：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));
});
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.