Как можно создать стилизованные квадраты с вложенными списками?

Question

Густав

css , html

Как можно создать стилизованные квадраты с вложенными списками?

Как можно создать таблицу, в которой будут два квадрата со списками, а также две стрелки для перемещения выбранных значений из одного списка в другой и обратно?

17 января 2024 г. 12:58

Ответы на вопрос 2

Похожие вопросы

Answer 1

Для того чтобы создать таблицу с квадратами (или панелями) содержащими списки, а также стрелками для перемещения элементов списков из одного квадрата в другой, можно использовать HTML для разметки, CSS для стилизации и JavaScript для реализации интерактивного поведения.

Вот пример кода, который иллюстрирует, как это может быть выполнено:

```html
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<title>Интерактивные списки</title>
<style>
  .box {
    border: 1px solid #000;
    width: 200px;
    height: 300px;
    overflow-y: scroll;
    display: inline-block;
    vertical-align: top;
  }
  .arrow-container {
    display: inline-block;
    vertical-align: top;
    margin: 100px 20px;
  }
  .arrow {
    display: block;
    margin: 10px;
    cursor: pointer;
  }
</style>
</head>
<body>

<table>
  <tr>
    <td>
      <div class="box" id="list1">
        <ul>
          <!-- Сюда добавляем элементы списка для первого квадрата -->
        </ul>
      </div>
    </td>
    <td class="arrow-container">
      <div class="arrow" id="toRight">&#8658;</div>
      <div class="arrow" id="toLeft">&#8656;</div>
    </td>
    <td>
      <div class="box" id="list2">
        <ul>
          <!-- Сюда добавляем элементы списка для второго квадрата -->
        </ul>
      </div>
    </td>
  </tr>
</table>

<script>
function moveItems(origin, dest) {
  var selectedItems = origin.querySelectorAll('li.selected');
  for (var i = 0; i < selectedItems.length; i++) {
    dest.querySelector('ul').appendChild(selectedItems[i]);
    selectedItems[i].classList.remove('selected');
  }
}

document.getElementById('list1').addEventListener('click', function(e) {
  if (e.target.tagName === 'LI') {
    e.target.classList.toggle('selected');
  }
});

document.getElementById('list2').addEventListener('click', function(e) {
  if (e.target.tagName === 'LI') {
    e.target.classList.toggle('selected');
  }
});

document.getElementById('toRight').addEventListener('click', function() {
  var list1 = document.getElementById('list1');
  var list2 = document.getElementById('list2');
  moveItems(list1, list2);
});

document.getElementById('toLeft').addEventListener('click', function() {
  var list1 = document.getElementById('list1');
  var list2 = document.getElementById('list2');
  moveItems(list2, list1);
});
</script>

</body>
</html>
```

В этом примере создаются два квадрата для списков (`<div class="box" id="list1">` и `<div class="box" id="list2">`) и две стрелки для перемещения (`<div class="arrow" id="toRight">` и `<div class="arrow" id="toLeft">`). С помощью JavaScript добавляются обработчики событий для каждой стрелки и для списка, которые позволяют перемещать выбранные элементы при клике на стрелку. Чтобы выбрать элемент в списке, достаточно по нему кликнуть — это добавит класс `selected`, который можно использовать для стилизации выбранных пунктов (например, добавить цвет фона или рамку).

Answer 2

Лучше использовать flexbox или grid. В первую ячейку первый квадрат, во вторую стрелки, в третью ячейку второй квадрат. 
 
 Знакомство можно начать отсюда https://tproger.ru/translations/css-flexbox-grid и https://habr.com/ru/articles/528672/