css - jQuery UI 可排序 : Prevent horizontal scrolling with connected lists between full height columns

Question

我正在使用 Bootstrap v4 中的 Flexbox 构建一个具有两个全高列的 Web 应用程序。两列都包含一个连接的可排序列表，可以使用 jQuery UI Sortable 对其进行排序。

HTML:

<div class="container-fluid h-100 d-flex flex-column p-0">

<div class="row flex-grow-1 p-3">

<div class="row flex-grow-1 p-3">
  <div class="col-4 mh-100 full-height-col">

    <ul class="list-group sortable-container sortable-connect">
      <li class="list-group-item">Item 1</li>
    </ul>
  </div>

  <div class="col-8 mh-100 full-height-col">

    <div class="row">
      <div class="col-4 mb-3">

        <ul class="list-group sortable-container sortable-connect">
          <li class="list-group-item">Item A</li>
        </ul>
      </div>

    </div>
  </div>
</div>

CSS:

body, html {
    height: 100%;
}
.sortable-container {
     min-height: 2rem;
}
.full-height-col {
    overflow-y: scroll;
    overflow-x: hidden;
}

JS

$(function() {
    $(".sortable-connect").sortable({
        connectWith: ".sortable-connect"
    }).disableSelection();
});

每当我将一个元素从左侧列表移动到右侧列表时，div 会水平滚动，所有剩余的元素都会移出窗口。

这是 JSFiddle .

关于如何防止左侧列表水平滚动的任何想法？

Answer 1

您需要将可排序的“滚动”设置为 false。

这将防止容器在拖动可排序元素时滚动。

接下来，您需要使用 helper: 'clone' 和 appendTo: 'body' 将可排序元素置于最前面；当您的可排序 div 有一个滚动条时，可排序元素将漂浮在其他所有内容的后面，使用助手会将其带到前面。

$(function() {
  $(".sortable-connect").sortable({
    connectWith: ".sortable-connect",
    scroll: false,
    helper: 'clone',
    appendTo: 'body',
    start: function(event,ui) {
      ui.helper.addClass('ui-helper');
    }
  }).disableSelection();
});