Блог

Главная - Вопросы по программированию - Сортируемый пользовательский интерфейс jQuery: предотвращает горизонтальную прокрутку с подключенными списками между столбцами полной высоты

Сортируемый пользовательский интерфейс jQuery: предотвращает горизонтальную прокрутку с подключенными списками между столбцами полной высоты

#css #bootstrap-4 #jquery-ui-sortable

#css #bootstrap-4 #jquery-ui-sortable

Вопрос:

Я создаю веб-приложение с двумя столбцами полной высоты, используя Flexbox в Bootstrap v4. Оба столбца содержат подключенный сортируемый список, который можно отсортировать с помощью 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.

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

Комментарии:

1. вы могли бы использовать перетаскиваемые и сбрасываемые , верно?

2. Что вы имеете в виду? Мне нужно, чтобы оба списка были сортируемыми…

3. Я подумал, что это нормально работает, если я удаляю overflow-y: scroll; из класса .full-height-col . Однако, если я это сделаю, список не будет прокручиваться по вертикали, если в нем много элементов.

4. да, вроде того… но я должен думать, что вы пытались реализовать перетаскивание из одного списка в другой…

5. Это то, что я хочу. Моя проблема в том, что я не могу запретить прокрутку левого списка в никуда каждый раз, когда я перемещаю элемент из левого списка в правый (см. Скрипку).

Ответ №1:

Вам нужно установить для сортируемой «прокрутки» значение false.

Это предотвратит прокрутку контейнера при перетаскивании сортируемого элемента.

Затем вы захотите использовать helper: 'clone' along with 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();
});
Метки: