jQuery UI Sortable: предотвращение горизонтальной прокрутки со связанными списками между столбцами полной высоты - PullRequest
Новая
       20

jQuery UI Sortable: предотвращение горизонтальной прокрутки со связанными списками между столбцами полной высоты

1 голос
/ 15 апреля 2019

Я создаю веб-приложение с двумя полноразмерными столбцами, используя Flexbox в Bootstrap v4.Оба столбца содержат связанный сортируемый список, который можно отсортировать с помощью сортировки пользовательского интерфейса jQuery.

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 .

Есть идеи о том, как запретить горизонтальную прокрутку левого списка?

1 Ответ

0 голосов
/ 10 июня 2019

Вам нужно установить сортируемую "прокрутку" в 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();
});
...